Live Demo: parse-nested-json-data

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Parse Nested JSON Data in JavaScript</title>
</head>
<body>
    <script>
    /* Storing multi-line JSON string in a JS variable
    using the new ES6 template literals */
    let json = `{
        "book": {
            "name": "Harry Potter and the Goblet of Fire",
            "author": "J. K. Rowling",
            "year": 2000,
            "characters": ["Harry Potter", "Hermione Granger", "Ron Weasley"],
            "genre": "Fantasy Fiction",
            "price": {
                "paperback": "$10.40", "hardcover": "$20.32", "kindle": "$4.11"
            }
        }
    }`;
    
    // Converting JSON object to JS object
    let obj = JSON.parse(json);
    
    // Define recursive function to print nested values
    function printValues(obj) {
        for(let k in obj) {
            if(obj[k] instanceof Object) {
                printValues(obj[k]);
            } else {
                document.write(obj[k] + "<br>");
            };
        }
    };
    
    // Printing all the values from the resulting object
    printValues(obj);
    
    document.write("<hr>");
    
    // Printing a single value
    document.write(obj["book"]["author"] + "<br>");  // Prints: J. K. Rowling
    document.write(obj["book"]["characters"][0] + "<br>");  // Prints: Harry Potter
    document.write(obj["book"]["price"]["hardcover"]);  // Prints: $20.32
    </script>
</body>
</html>

Code Editor

Output Preview