How to loop through a plain object with the objects as members in JavaScript ?

Looping through a plain JavaScript object with objects as members means iterating over each property of the object and accessing its values, which may also be objects. This is a common task in JavaScript, especially when dealing with JSON data or APIs.

There are several ways to loop through a plain JavaScript object with objects as members. Here are four common approaches

• Using For…in loop
• Using Object.keys()
• Using Object.entries()
• Using Object.Values()

Approach 1: Using For…in loop

This approach uses a for…in loop to iterate over each property of the object and access its values. For each property, the loop sets the key as the name of the property and the value as the value of the property. This approach is useful when you want to perform a similar action for each property of the object.

Syntax:

//for...in loop
for (let key in object) {
    // do something with object[key]
}

Example: Using a for…in loop to iterate over an object with objects as members.

Javascript

let person = {
    name: "John",
    age: 30,
    address: {
        street: "123 Main St",
        city: "Anytown",
        state: "CA",
        zip: "12345"
    }
};
for (let key in person) {
    console.log(key + ": " + person[key]);
};

Output

name: John
age: 30
address: [object Object]

Approach 2: Using Object.keys()

This approach uses the Object.keys() method to get an array of all the keys in the object. It then uses the forEach() method to iterate over each key in the array and access its corresponding value. This approach is useful when you want to perform a specific action for each key in the object.

Syntax:

// Object.keys()
Object.keys(object).forEach(function (key) {
    // do something with object[key]
});

Example: Using Object.keys() to iterate over an object with objects as members

Javascript

const myObj = {
    prop1: { name: 'John', age: 25 },
    prop2: { name: 'Sarah', age: 30 },
    prop3: { name: 'Tom', age: 20 }
};

const newArray = Object.keys(myObj).map(key => {
    const obj = myObj[key];
    return { ...obj, id: key };
    // Adding an id property to the object
});

console.log(newArray);

Output

[
  { name: 'John', age: 25, id: 'prop1' },
  { name: 'Sarah', age: 30, id: 'prop2' },
  { name: 'Tom', age: 20, id: 'prop3' }
]

Approach 3: Using Object.entries()

This approach uses the Object.entries() method to get an array of all the key-value pairs in the object. It then uses the forEach() method to iterate over each key-value pair and access the value, which could be an object. This approach is useful when you want to perform a specific action for each key-value pair in the object.

Syntax:

// Object.entries()
Object.entries(object).forEach(function([key, value]) {
    // do something with value (which could be an object)
});

Example: Using Object.entries() to iterate over an object with objects as members.

Javascript

let person = {
    name: "John",
    age: 30,
    address: {
        street: "123 Main St",
        city: "Anytown",
        state: "CA",
        zip: "12345"
    }
};
Object.entries(person).forEach(([key, value]) => {
    console.log(key + ": " + value);
});

Output

name: John
age: 30
address: [object Object]

Approach 4: Using Object.Values()

In this approach Object.values() returns an array of values from an object. It’s used to loop through values, access properties in the person object, and printing names and ages.

Syntax:

Object.values(obj)

Example: Using Object.values(), loop through objects in the person object and log their names and ages.

Javascript

const person = {
    obj1: { name: "John", age: 30 },
    obj2: { name: "Jane", age: 25 },
    obj3: { name: "Bob", age: 40 }
};

Object.values(person).forEach(obj => {
    console.log("name :" + obj.name, "age :" + obj.age);
});

Output

name :John age :30
name :Jane age :25
name :Bob age :40