5 Ways Javascript Loop Through Array Of Objects

When you work on real-life data looping through an array of objects is a common task. An array of objects is generally received by some API call or by some JSON data.

Using javascript we will loop through an array of objects in 5 different ways. We can also perform various operations on the object like property adding, property removing, property editing, etc while looping through the array.

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.

Here are the various different ways to loop through an array of objects.

1. Using for loop

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

To loop through an array of objects use for loop and execute the loop over the length of the array and access the object at that index.

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

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 method is a modern way of looping array in javascript. forEach loop executes a function for each element of the array and gives us access to the current element as well as the index within the function.

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

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);
});

You can see in the above example you can directly access the array elements also has access to the index.

3. Using for...in loop

for...in loop is used when you need to loop through the properties of an object. And as an array is also an object in javascript, so you can use this here.

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

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.

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.

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.

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'.

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.

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.

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

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 of how Javascript loop through 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.