How to use JSON with JavaScript

Here's an example of using JavaScript to output JSON data to a web page.

JSON is based on a subset of JavaScript, and a JSON document can easily be converted into a JavaScript value.

Here's a simple example of how you can use JavaScript to store a JSON text, then output it to a web page.

Basic Example

Here's the JSON data we'll use in this example:

We'll use JavaScript to take the above JSON data, format it with HTML tags, and output it to the HTML document.

Here's the code:

<!doctype html>
<title>Example</title>
<script>
function displayArtists() {

  // Our JSON data
  var data = 
    {
      "artists" : [
        { 
          "artistname" : "Leonard Cohen",
          "born" : "1934"
          },
        { 
          "artistname" : "Joe Satriani",
          "born" : "1956" 
          },
        { 
          "artistname" : "Snoop Dogg",
          "born" : "1971"
          }
      ]
    }
    
    // Put the data into a variable and format with HTML tags
    var output = "<h1>Artists</h1>";
    output += "<ul>";    
    
    // Loop through the artists
    for (var i in data.artists) {
        output += "<li>" + data.artists[i].artistname + " (Born: " + data.artists[i].born + ")</li>"; 
    }
    
    output += "</ul>";

    // Output the data to the "artistList" element
    document.getElementById("artistList").innerHTML=output;
}    

// Load the above function when the window loads
window.onload = displayArtists;
</script>


<div id="artistList"></div>

Try it

In this example, we output the formatted JSON data using innerHTML.

We also place the JavaScript inside a function, then call that function once the page loads (using window.onload. Alternatively, you could use some other event to call the function.

Nested For Loop

Here's another example. This time we'll use a larger JSON file with deeper nesting.

Not only does this file have artist information, but each artist has a number of albums. So we'll need to loop through the artists, and also loop through each artists' albums.

<!doctype html>
<title>Example</title>
<script>
function displayArtists() {

  // Our JSON data
  var data = 
    {
      "artists" : [
        {
          "artistname" : "Deep Purple",
          "formed" : "1968",
          "albums" : [
            {
              "albumname" : "Machine Head",
              "year" : "1972",
              "genre" : "Rock"
            }, 
            {
              "albumname" : "Stormbringer",
              "year" : "1974",
              "genre" : "Rock"
            }
          ]
        },
        {
          "artistname" : "Joe Satriani",
          "born" : "1956",
          "albums" : [
            {
              "albumname" : "Flying in a Blue Dream",
              "year" : "1989",
              "genre" : "Instrumental Rock"
            }, 
            {
              "albumname" : "The Extremist",
              "year" : "1992",
              "genre" : "Instrumental Rock"
            },
            {
              "albumname" : "Shockwave Supernova",
              "year" : "2015",
              "genre" : "Instrumental Rock"
            }
          ]
        },
        {
          "artistname" : "Snoop Dogg",
          "born" : "1971",
          "albums" : [
            {
              "albumname" : "Tha Doggfather",
              "year" : "1996",
              "genre" : "Gangsta Rap"
            }, 
            {
              "albumname" : "Snoopified",
              "year" : "2005",
              "genre" : "Gangsta Rap"
            }
          ]
        }
      ]
    }
    
    // Put the data into a variable and format with HTML tags
    var output = "<h1>Artists</h1>";
    
    // Loop through the artists
    for (var i in data.artists) {
        output += "<h2>" + data.artists[i].artistname + "</h2>"; 
        output += "<ul>";
        
        // Loop through the albums for the current artist
        for (var j in data.artists[i].albums) {
          output += "<li>" + data.artists[i].albums[j].albumname;
      }
      output += "</ul>";
    }

    // Output the data to the "artistlist" element
    document.getElementById("artistlist").innerHTML=output;
}    

// Load the above function when the window loads
window.onload = displayArtists;
</script>


<div id="artistlist"></div>

Try it

Just like in the first example, this example uses a function that is called when the page loads.

However, the function in the second example uses two for loops — one nested inside the other — to retrieve the nested data.