Home › Javascript › Programmatically create JSON structure using javascript

Programmatically create JSON structure using javascript

April 18, 2012 - 2:25pm — Xuan Ngo 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 
    <script type="text/javascript">
 
      /*********************************************************
       Programmatically create JSON structure using javascript.
       *********************************************************/
      function displayResults()
      {
        // Define root node.
        var jsonData = {
                          "id": "root",
                          "name": "I'm the parent.",
                          "data": {"someKey": "some Value"}
                        };
 
        // Add children and grand-children.
        jsonData.children=[];
        for(i=0; i<2; i++)
        {
          // Add children.
          jsonData.children[i] = { id: 'ID_'+i, name: 'child_'+i, data: {someKey: 'some Value'} };
 
          // Add grandChildren.
          jsonData.children[i].grandChildren=[];
          for(j=0; j<4; j++)
          {
            jsonData.children[i].grandChildren[j] = { id: 'ID_'+i+'_'+j, name: 'grand-child_'+i+'_'+j, data: {someKey: 'some Value'} };
          }
        }
 
        sResults = JSON.stringify(jsonData, null, 2); // Beautify JSON data structure.
        // Display results.
        var txtNode = document.createTextNode(sResults); 
        document.getElementById('ResultTextID').appendChild(txtNode);
      }
 
    </script>
 
    <title>JSON example</title>
  </head>
 
  <body onload="displayResults()">
    <pre id="ResultTextID" style="background-color: #C0C0C0; word-wrap: break-word;" />
  </body>
</html>

Output:

{
  "id": "root",
  "name": "I'm the parent.",
  "data": {
    "someKey": "some Value"
  },
  "children": [
    {
      "id": "ID_0",
      "name": "child_0",
      "data": {
        "someKey": "some Value"
      },
      "grandChildren": [
        {
          "id": "ID_0_0",
          "name": "grand-child_0_0",
          "data": {
            "someKey": "some Value"
          }
        },
        {
          "id": "ID_0_1",
          "name": "grand-child_0_1",
          "data": {
            "someKey": "some Value"
          }
        },
        {
          "id": "ID_0_2",
          "name": "grand-child_0_2",
          "data": {
            "someKey": "some Value"
          }
        },
        {
          "id": "ID_0_3",
          "name": "grand-child_0_3",
          "data": {
            "someKey": "some Value"
          }
        }
      ]
    },
    {
      "id": "ID_1",
      "name": "child_1",
      "data": {
        "someKey": "some Value"
      },
      "grandChildren": [
        {
          "id": "ID_1_0",
          "name": "grand-child_1_0",
          "data": {
            "someKey": "some Value"
          }
        },
        {
          "id": "ID_1_1",
          "name": "grand-child_1_1",
          "data": {
            "someKey": "some Value"
          }
        },
        {
          "id": "ID_1_2",
          "name": "grand-child_1_2",
          "data": {
            "someKey": "some Value"
          }
        },
        {
          "id": "ID_1_3",
          "name": "grand-child_1_3",
          "data": {
            "someKey": "some Value"
          }
        }
      ]
    }
  ]
}