Tutorials Tonight
Follow Us

Javascript Loop Through Array Of Objects


While working in JavaScript we regularly need to loop through an array of objects. You may get an array of objects by some API call or by some JSON data.

Using javascript loop through an array of objects in 5 different ways. We will also see some of the operations that we can perform on objects while looping.

    Table Of Contents

  1. Loop through array of objects
    1. Using for loop
    2. Using forEach loop
    3. Using for...in loop
    4. Using for...of loop
    5. Using while loop
  2. Loop through array of objects and perform some operation
    1. loop through an array of objects with index
    2. loop through an array of objects and change values
    3. loop through an array of objects and filter
    4. loop through an array of objects and add a property

Loop through array of objects

Looping through array of objects is a very common task in JavaScript.

Let's see various different ways to loop through an array of objects.

javascript loop through array of objects

1. Using for loop

Using for loop is the most common way to loop anything in JavaScript. You can use this loop to loop through an array of objects.

The following example loop through an array of objects and print the object in the console.

Example

const data = [
  { name: 'John', age: 30, group: 'A' },
  { name: 'Mary', age: 25, group: 'B' },
  { name: 'Mike', age: 20, group: 'A' },
  { name: 'Jane', age: 15, group: 'C' },
  { name: 'Peter', age: 25, group: 'B' }
];

// for loop
for (let i = 0; i < data.length; i++) {
  console.log(data[i]);
}

2. Using forEach loop

forEach is a modern way of looping array in javascript. It executes a block of code for each element in an array and gives us access to the current element as well as the index of the element.

Here is the example that uses a forEach loop to loop through an array of objects.

Example

const data = [
  { name: 'John', age: 30, group: 'A' },
  { name: 'Mary', age: 25, group: 'B' },
  { name: 'Mike', age: 20, group: 'A' },
  { name: 'Jane', age: 15, group: 'C' },
  { name: 'Peter', age: 25, group: 'B' }
];

// forEach loop
data.forEach(function(item, index) {
  console.log(item, index);
});

3. Using for...in loop

for...in loop is used to loop through the properties of an object. Since an array is also an object in javascript, we can use this here.

The loop will provide us a key for each property in an object and we can use this key to access the value of the property.

Example

const data = [
  { name: 'John', age: 30, group: 'A' },
  { name: 'Mary', age: 25, group: 'B' },
  { name: 'Mike', age: 20, group: 'A' },
  { name: 'Jane', age: 15, group: 'C' },
  { name: 'Peter', age: 25, group: 'B' }
];

// for...in loop
for (const key in data) {
  console.log(key, data[key]);
}

4. Using for...of loop

for...of loop is very much like for...in loop. The difference is that for...of loop provides us direct access to the value of the property.

The following example uses the for...of loop to loop through an array of objects.

Example

const data = [
  { name: 'John', age: 30, group: 'A' },
  { name: 'Mary', age: 25, group: 'B' },
  { name: 'Mike', age: 20, group: 'A' },
  { name: 'Jane', age: 15, group: 'C' },
  { name: 'Peter', age: 25, group: 'B' }
];

// for...of loop
for (const item of data) {
  console.log(item);
}

5. Using while loop

while loop is not a famous choice for looping in javascript but it's good to know how to use it.

We can store the length of the array in a variable and use this variable in the condition of a while loop to break the loop.

Also, create a variable count to access object elements in the array.

Example

const data = [
  { name: 'John', age: 30, group: 'A' },
  { name: 'Mary', age: 25, group: 'B' },
  { name: 'Mike', age: 20, group: 'A' },
  { name: 'Jane', age: 15, group: 'C' },
  { name: 'Peter', age: 25, group: 'B' }
];

// while loop
let len = data.length, count = 0;
while(len--) {
  console.log(data[count]);
  count++;
}

Loop through array and perform operation on objects

We have seen 5 different ways to loop through an array of objects above. Let's now see how we can perform operations on each object in the array.

The operation you can perform on each object could be anything like adding a property, modifying or deleting a property, etc.

Javascript loop through array of objects with index

Accessing the index of the element in the array is very important when we want to perform an operation on array elements.

The following example shows how you can get the index of the array element.

Example

const data = [
  { name: 'John', age: 30, group: 'A' },
  { name: 'Mary', age: 25, group: 'B' },
  { name: 'Mike', age: 20, group: 'A' },
  { name: 'Jane', age: 15, group: 'C' },
  { name: 'Peter', age: 25, group: 'B' }
];

// for loop
for (let i = 0; i < data.length; i++) {
  console.log(i); // here i is index
}
// foreach loop
data.forEach(function(item, index) {
  console.log(index);
});

Javascript Loop Through Array Of Objects And Change Values

You can change the value of an object property while looping through an array of objects.

The following example finds all the people whose age is greater than 20 and changes their group to 'E'.

Example

const data = [
  { name: 'John', age: 30, group: 'A' },
  { name: 'Mary', age: 25, group: 'B' },
  { name: 'Mike', age: 20, group: 'A' },
  { name: 'Jane', age: 15, group: 'C' },
  { name: 'Peter', age: 25, group: 'B' }
];

// change group of people whose age is greater than 20
data.forEach(function(item, index) {
  if (item.age > 20) {
    item.group = 'E';
  }
});

Javascript Loop Through Array Of Objects And Delete Filter

Filtering out array elements means removing elements from the array which you don't want to keep. You can use the filter method to filter out array elements.

The following example shows how you can filter out array elements and filter out people whose age is greater than 20.

Example

const data = [
  { name: 'John', age: 30, group: 'A' },
  { name: 'Mary', age: 25, group: 'B' },
  { name: 'Mike', age: 20, group: 'A' },
  { name: 'Jane', age: 15, group: 'C' },
  { name: 'Peter', age: 25, group: 'B' }
];

// filter out people whose age is greater than 20
const filteredData = data.filter(function(item) {
  return item.age > 20;
});

console.log(filteredData);

Javascript loop through array of objects and add property

Let's add a property to each object in the array.

The example below add a property isAdult to each object in the array.

Example

const data = [
  { name: 'John', age: 30, group: 'A' },
  { name: 'Mary', age: 25, group: 'B' },
  { name: 'Mike', age: 20, group: 'A' },
  { name: 'Jane', age: 15, group: 'C' },
  { name: 'Peter', age: 25, group: 'B' }
];

// add isAdult property to each object
data.forEach(function(item, index) {
  item.isAdult = item.age > 20;
});

Conclusion

We discussed 5 different ways to loop through an array of objects. Here is a bonus one for you just for learning purposes. Try using do...while loop to loop through an array of objects.

You can try sorting an array of objects as an activity.