Print JSON nested object in JavaScript?

To print JSON nested objects in JavaScript, you can use various approaches depending on the structure of your data. When dealing with nested JSON strings within objects, you'll need to parse them first using JSON.parse().

Example: Parsing Nested JSON Strings

Here's how to handle objects containing JSON strings as properties:

var details = [
    {
        "studentId": 101,
        "studentName": "John",
        "countryName": "US",
        "subjectDetails": "{"0":"JavaScript","1":"David"}"
    },
    {
        "studentId": 102,
        "studentName": "Bob",
        "countryName": "UK",
        "subjectDetails": "{"0":"Java","1":"Carol"}"
    },
    {
        "studentId": 103,
        "studentName": "Mike",
        "countryName": "AUS",
        "subjectDetails": "{"0":"MongoDB","1":"Adam"}"
    }
];

for (const detailsObject of details) {
    const subjectDetailsObject = JSON.parse(detailsObject.subjectDetails);
    console.log(subjectDetailsObject[0]);
}

JavaScript
Java
MongoDB

Method 1: Using JSON.stringify() for Complete Objects

To print entire nested objects with proper formatting:

var student = {
    "id": 101,
    "name": "Alice",
    "courses": {
        "math": {
            "grade": "A",
            "credits": 3
        },
        "science": {
            "grade": "B+",
            "credits": 4
        }
    }
};

console.log(JSON.stringify(student, null, 2));

{
  "id": 101,
  "name": "Alice",
  "courses": {
    "math": {
      "grade": "A",
      "credits": 3
    },
    "science": {
      "grade": "B+",
      "credits": 4
    }
  }
}

Method 2: Accessing Nested Properties Directly

For objects with actual nested structures (not JSON strings):

var company = {
    "name": "TechCorp",
    "employees": {
        "developers": [
            {"name": "Sarah", "skills": ["JavaScript", "React"]},
            {"name": "Tom", "skills": ["Python", "Django"]}
        ],
        "designers": [
            {"name": "Lisa", "tools": ["Figma", "Photoshop"]}
        ]
    }
};

// Access nested arrays and objects
console.log("Company:", company.name);
console.log("First developer:", company.employees.developers[0].name);
console.log("Developer skills:", company.employees.developers[0].skills.join(", "));

Company: TechCorp
First developer: Sarah
Developer skills: JavaScript, React

Method 3: Recursive Function for Deep Printing

For complex nested structures, use a recursive approach:

function printNestedObject(obj, indent = 0) {
    const spaces = " ".repeat(indent);
    
    for (let key in obj) {
        if (typeof obj[key] === "object" && obj[key] !== null) {
            console.log(spaces + key + ":");
            printNestedObject(obj[key], indent + 2);
        } else {
            console.log(spaces + key + ": " + obj[key]);
        }
    }
}

var data = {
    "user": {
        "profile": {
            "name": "John",
            "age": 30,
            "address": {
                "city": "New York",
                "zipCode": "10001"
            }
        }
    }
};

printNestedObject(data);

user:
  profile:
    name: John
    age: 30
    address:
      city: New York
      zipCode: 10001

Conclusion

Use JSON.parse() for nested JSON strings, JSON.stringify() for formatted output, and direct property access for simple nested objects. Choose the method based on your data structure and output requirements.