How to Iterate JSON Object in JavaScript?

In JavaScript, there are different ways to iterate over the properties of a JSON object. Let’s look at the most common techniques.

1. Using for...in Loop

The for...in loop is a simple way to go through the properties of a JSON object. It loops over the keys of the object. Inside the loop, we can access each key's value using obj[key].

const obj = {
    "company": 'GeeksforGeeks',
    "contact": '+91-9876543210',
    "city": 'Noida'
};

for (const key in obj) {
    console.log(`${key}: ${obj[key]}`);
}

company: GeeksforGeeks
contact: +91-9876543210
city: Noida

2. Using Object.keys() and Array forEach() Method

Object.keys() can be used to get an array of the keys from a JSON object. This array of keys can then be iterated over using the forEach method. Object.keys(obj) returns the keys of the JSON object. Inside the forEach loop, each property value can be accessed using obj[key]

const obj = {
    "company": 'GeeksforGeeks',
    "contact": '+91-9876543210',
    "city": 'Noida'
};

Object.keys(obj).forEach(key => {
    console.log(`${key}: ${obj[key]}`);
});

company: GeeksforGeeks
contact: +91-9876543210
city: Noida

3. Using Object.entries() and Array forEach() Method

To access both the keys and values of a JSON object, Object.entries() can be used. This method returns an array of [key, value] pairs from the object. The forEach method can then be applied to iterate through the array of entries. Inside the loop, both the key and value of each property can be accessed directly.

const obj = {
    "company": 'GeeksforGeeks',
    "contact": '+91-9876543210',
    "city": 'Noida'
};

Object.entries(obj).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
});

company: GeeksforGeeks
contact: +91-9876543210
city: Noida

4. Using for...of Loop with Object.entries() Method

The for...of loop can be used with Object.entries() to iterate over the [key, value] pairs of a JSON object. The Object.entries(obj) method returns an array of [key, value] pairs from the object. The for...of loop then iterates through this array, allowing direct access to both the key and value of each property.

const obj = {
    "company": 'GeeksforGeeks',
    "contact": '+91-9876543210', 
    "city": 'Noida'
};

for (const [key, value] of Object.entries(obj)) {
    console.log(`${key}: ${value}`);
}

company: GeeksforGeeks
contact: +91-9876543210
city: Noida

5. Using the Fetch API

When retrieving data from an external API or server, it's common to get the response in JSON format. The Fetch API is a modern method to make HTTP requests and retrieve this data.

fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => response.json()) 
    .then(data => {
        for (const [key, value] of Object.entries(data[0])) {
            console.log(key + ": " + value);
        }
    })
    .catch(error => console.log('Error fetching data:', error));

Output

id: 1
name: Leanne Graham
username: Bret
email: [email protected]
address: {"street":"Kulas Light","suite":"Apt. 556","city":"Gwenborough","zipcode":"92998-3874","geo":{"lat":"-37.3159","lng":"81.1496"}}
phone: 1-770-736-8031 x56442
website: hildegard.org
company: {"name":"Romaguera-Crona","catchPhrase":"Multi-layered client-server neural-net","bs":"harness real-time e-markets"}

Conclusion

In JavaScript, there are various ways to iterate over a JSON object, such as using the for...in loop, Object.keys(), Object.entries(), and for...of. Each method provides a simple and effective way to access the keys and values of a JSON object, depending on the use case. The Fetch API also makes it easy to retrieve and work with JSON data from external sources.