How to Iterate JSON Object in JavaScript?

JSON (JavaScript Object Notation) is a lightweight data-interchange format commonly used to exchange data between a server and a web application. JSON objects are similar to JavaScript objects, and iterating over them is a common task. In this article, we'll explore different approaches to iterate over a JSON object in JavaScript, along with complete code examples and explanations.

Iterate JSON Object using for...in Loop

The for...in loop is a simple and basic method to iterate over the properties of a JSON object—the for...in loop iterates over the keys of the JSON Object (obj). Inside the loop, you can access the value of each property using obj[key]. This method allows you to perform operations on both the keys and values of the JSON object.

Example 1: Iterating Over JavaScript Object Properties: This code iterates over the properties of a JavaScript object 'obj' using a for...in the loop, printing each key-value pair to the console.

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

Example 2: This code iterates over a nested JavaScript object 'obj', printing each key along with its associated values, including nested arrays and their respective properties.

const obj = { 
    "Data Structures": [ 
        { 
            "Name" : "Trees", 
            "Course" : "Intoduction of Trees", 
            "Content" : [ "Binary Tree", "BST", "Generic Tree"] 
        }, 
        { 
            "Name" : "Graphs", 
            "Topics" : [ "BFS", "DFS", "Topological Sort" ] 
        } 
    ] 
};

for (const key in obj) {
    console.log(`${key}:`);
    obj[key].forEach(item => {
        console.log(`\tName: ${item.Name}`);
        if (item.Course) {
            console.log(`\tCourse: ${item.Course}`);
        }
        if (item.Content) {
            console.log(`\tContent: ${item.Content.join(', ')}`);
        }
        if (item.Topics) {
            console.log(`\tTopics: ${item.Topics.join(', ')}`);
        }
        console.log();
    });
}

Data Structures:
    Name: Trees
    Course: Intoduction of Trees
    Content: Binary Tree, BST, Generic Tree

    Name: Graphs
    Topics: BFS, DFS, Topological Sort

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

You can use Object.keys() to get an array of the keys of the JSON object and then iterate over this array using the forEach method. Object.keys(obj) returns an array of the keys of the JSON Object (obj). The forEach method is used to iterate over this array of keys. Inside the forEach loop, you can access the value of each property using obj[key].

Example: This code iterates over the keys of the JavaScript object 'obj' using Object.keys(), printing each key along with its corresponding value.

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

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

If you need both the keys and values of the JSON object, you can use Object.entries() to get an array of [key, value] pairs and then iterate over this array. Object.entries(obj) returns an array of [key, value] pairs from the JSON Object (obj). The forEach method is used to iterate over this array of entries. Inside the forEach loop, you can directly access both the key and value of each property.

Example: This code iterates over the entries (key-value pairs) of the JavaScript object 'obj' using Object.entries(), printing each key-value pair.

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

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

You can also use the for...of loop in combination with Object.entries() to iterate over the [key, value] pairs of the JSON object. Object.entries(obj) returns an array of [key, value] pairs from the JSON Object (obj). The for...of loop iterates over this array of entries. Inside the loop, you can directly access both the key and value of each property.

Example: This code iterates over the entries (key-value pairs) of the JavaScript object 'obj' using Object.entries(), destructuring each entry into 'key' and 'value', and then printing them.

const obj = {
    "company": 'GeeksforGeeks', // Define an object with company name
    "contact": '+91-9876543210', // Add contact information
    "city": 'Noida' // Specify the city
};

// Iterate over each key-value pair in the object
for (const [key, value] of Object.entries(obj)) {
    console.log(`${key}: ${value}`); // Log the key and its corresponding value
}

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