Iterating through an array of objects using for each or for in

Question

Please how do one iterate over a array of object like using "for each" or "for in or is there another way

{
    "cards": [
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "Layer1.png",
            "id": 1
        },
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "tom-jagger.jpg",
            "id": 2
        },
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "Layer3.png",
            "id": 3
        }
    ]
}

i need the output to be each object in the array Also lets say i want to do the iteration using the "id" parameter. how do i do this

Possible duplicate of [For-each over an array in JavaScript?](https://stackoverflow.com/questions/9329446/for-each-over-an-array-in-javascript) — Just code, Jan 08 '19 at 06:38
you can find your answer here :- https://stackoverflow.com/questions/634654/what-is-the-difference-between-for-in-and-for-each-in-in-javascript — Parth Raval, Jan 08 '19 at 06:38
Possible Duplicate: https://stackoverflow.com/questions/16626735/how-to-loop-through-an-array-containing-objects-and-access-their-properties — Rajesh, Jan 08 '19 at 06:40

score 0 · Answer 1 · answered Jan 08 '19 at 06:35

Try forEach

let k={
    "cards": [
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "Layer1.png",
            "id": 1
        },
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "tom-jagger.jpg",
            "id": 2
        },
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "Layer3.png",
            "id": 3
        }
    ]
}

k.cards.forEach(a=>{
console.log(a.imgSrc)
console.log(a.des)
console.log(a.cardName)
})

score 0 · Answer 2 · answered Jan 08 '19 at 06:36

Sure - simplest way is Array.prototype.forEach():

 

const cards = [
    {
        "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
        "cardName": "Aenean nec sem vestibulum",
        "imgSrc": "Layer1.png",
        "id": 1
    },
    {
        "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
        "cardName": "Aenean nec sem vestibulum",
        "imgSrc": "tom-jagger.jpg",
        "id": 2
    },
    {
        "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
        "cardName": "Aenean nec sem vestibulum",
        "imgSrc": "Layer3.png",
        "id": 3
    }
];

cards.forEach(card => console.log(card));

score 0 · Answer 3 · answered Jan 08 '19 at 06:36

There are two ways:

let cards =[
    {
        "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
        "cardName": "Aenean nec sem vestibulum",
        "imgSrc": "Layer1.png",
        "id": 1
    },
    {
        "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
        "cardName": "Aenean nec sem vestibulum",
        "imgSrc": "tom-jagger.jpg",
        "id": 2
    },
    {
        "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
        "cardName": "Aenean nec sem vestibulum",
        "imgSrc": "Layer3.png",
        "id": 3
    }
];

... ...

for(var i in cards){
    console.log(cards[i]);
}

or

cards.map(function(each_item, index_key){
    console.log(each_item);
});

score 0 · Answer 4 · answered Jan 08 '19 at 06:36

It depends if you want to iterate over it and return or not.

You can do the following to modify the response over the iteration or just return every single object in a loop:

Map: array.map will return https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

array.map(item => console.log(item));

Foreach: method executes a provided function once for each array element. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

var array1 = ['a', 'b', 'c'];

array1.forEach(function(element) {
  console.log(element);
});

Dacre Denny · Accepted Answer · 2019-01-08T07:06:36.670

You have a number of options availbe to you for iterating (looping) through data like this. The more common methods would be:

Iteration via Array#forEach():

data.cards.forEach(function(card) {
  console.log(card);
});

Iteration via an iterator using the for-of construct:

for(const card of data.cards) {
  console.log(card);
};

Iteration via an iterator using the for-in construct:

for(const key in data.cards) {
  const value = data.cards[key];
  console.log(value);
};

Here is a working snippet showing these in action:

var data = {
    "cards": [
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "Layer1.png",
            "id": 1
        },
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "tom-jagger.jpg",
            "id": 2
        },
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "Layer3.png",
            "id": 3
        }
    ]
};

// Array.forEach method
data.cards.forEach(function(card) {
  console.log(card);
});

// for-of loop
for(const card of data.cards) {
  console.log(card);
};

// for-in loop
for(const key in data.cards) {
  const value = data.cards[key];
  console.log(value);
};

thanks , but lets say i want to do the iteration using the "id" parameter. how do i do this — Chidexebere, Jan 08 '19 at 06:53
If I understand correctly, you want to iterate via a `key`, using the `for - in` loop construct - is that correct? Just updated the answer to demonstrate that - hope this helps :) — Dacre Denny, Jan 08 '19 at 07:07

score 0 · Answer 6 · answered Jan 08 '19 at 07:05

let data={
    "cards": [
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "Layer1.png",
            "id": 1
        },
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "tom-jagger.jpg",
            "id": 2
        },
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "Layer3.png",
            "id": 3
        }
    ]
}
function match(data,id){
return data.cards.filter(a=>id==a.id)
}
console.log(match(data,1))

score 0 · Answer 7 · answered Jan 08 '19 at 07:17

Apart from using forEach and forIn.You can use javascript map function.You can also use third party modules such as Lodash which provides lots of useful helper functions. Here is the link Lodash Documentation

var _= require('lodash');
const cards = [
  {
    "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
    "cardName": "Aenean nec sem vestibulum",
    "imgSrc": "Layer1.png",
    "id": 1
  },
  {
    "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
    "cardName": "Aenean nec sem vestibulum",
    "imgSrc": "tom-jagger.jpg",
    "id": 2
  },
  {
    "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
    "cardName": "Aenean nec sem vestibulum",
    "imgSrc": "Layer3.png",
    "id": 3
  }
]

_.forEach(cards,item => {

  console.log("cards has:",item)
})

Iterating through an array of objects using for each or for in

7 Answers7