JSON - Creating Content with jQuery

Now that we have a sense of JSON and its "object" and "array" structures, let's see how we can create content from JSON using JavaScript.

We'll use the jQuery JavaScript library to build up markup based on data in the JSON structure, and then we'll place it on the page.

We'll use the "seasons" array to build an unordered list of seasons.

The JSON data:

The result we will build:

Let's take a look at the important parts:

HTML:

JavaScript:

• var mydata = {"seasons":["Spring", "Summer", "Autumn", "Winter"]};
  The JSON data structure. An object with a single name/value pair (name is "seasons" and value is the array of 4 strings)
• var ul_node = $('<ul>');
  Use jQuery syntax to create a ul node,
• for (var s of mydata.seasons) {
  Iterate through the array.
• var li_node = $('<li>');
  Use jQuery syntax to create an li node.
• li_node.text(s);
  Set the text value of the li node to be the value of the array item (e.g. first time through the loop, this creates
• ul_node.append(li_node);
  Append the li node to the ul node (e.g. the first time through the loop, we will then have 
• }
  this is the curly brace to close the close the loop started in for (var i in seasons) {
• $('#seasons_container').append(ul_node);
  Finally, once the ul is completed, we append it to the element whose id is #seasons

All Together

• Seasons Example Standalone

Complete markup is: