Parse nested JSON with JQuery

Parse nested JSON with JQuery

Hi, 

I'm using the following code to parse a JSON and output to a web page:

  2.   <body>

  4.      
  5.       <section>

  7.       </section>

  9.     <script>
  10.    
  11.     var section = document.querySelector('section');
  12.     var requestURL = 'http://localhost/working/points_data.json';
  13.     var request = new XMLHttpRequest();
  14.     request.open('GET', requestURL);
  15.     request.responseType = 'text';
  16.     request.send();
  17.     request.onload = function() {
  18.       var JsonText = request.response;
  19.       var JsonData = JSON.parse(JsonText);
  20.       showPoints(JsonData);
  21.     }
  22.     
  23.     function showPoints(jsonObj) {
  24.       var points_arr = jsonObj['ref'];
  25.       for(var i = 0; i < points_arr.length; i++) {
  26.         var myArticle = document.createElement('article');
  27.         var myH2 = document.createElement('h2');
  28.         var myPara1 = document.createElement('p');
  29.         var myPara2 = document.createElement('p');
  30.         var myPara3 = document.createElement('p');
  31.         var myList = document.createElement('ul');
  32.         myH2.textContent = points_arr[i].name;
  33.         myPara1.textContent = 'Display: ' + points_arr[i].display;
  34.         myPara2.textContent = 'href: ' + points_arr[i].href;
  35.         myPara3.textContent = 'Is:' + points_arr[i].is;
  36.         myArticle.appendChild(myH2);
  37.         myArticle.appendChild(myPara1);
  38.         myArticle.appendChild(myPara2);
  39.         myArticle.appendChild(myPara3);
  40.         myArticle.appendChild(myList);
  41.         section.appendChild(myArticle);
  42.       }
  43.     }
  44.     </script>
  45.   </body>


My text/sample JSON looks like this, which works.

  2. {
  3.   "name": "points",
  4.   "display": "points",
  5.   "href": "http://#",
  6.   "ref": [
  7.       {
  8.       "name": "A1",
  9.       "display": "A1",
  10.       "href": "A1/",
  11.   "is": "A1"
  12.     },
  13. {
  14.       "name": "B1",
  15.       "display": "B1",
  16.       "href": "B1",
  17.   "is": "B1"
  18.     },

  20. {
  21.       "name": "C1",
  22.       "display": "C1",
  23.       "href": "C1",
  24.       "is": "C1"
  25.     }

  27.   ]
  28. }
But, my actual live data I believe is nested like so, and doesn't display any output to the website.  Is there a way to handle the nested " obj": ?  

Or, alternatively, is there a better way to look through JSON, and output to a web page.

  2. {
  3.   "obj": {
  4.     "name": "points",
  5.     "display": "points",
  6.     "href": "http://##",
  7.     "is": "/is",
  8.     "ref": [
  9.     {
  10.       "name": "AI",
  11.       "display": "AI",
  12.       "href": "AI/",
  13.       "is": "is"
  14.     },
  15.     {
  16.       "name": "AI1",
  17.       "display": "AI1",
  18.       "href": "AI1/",
  19.       "is": "/is",
  20.     },
  21.     {
  22.       "name": "BV",
  23.       "display": "BV",
  24.       "href": "BV/",
  25.       "is": "/is",
  26.     }  ],
  27.     "int": [
  28.     {
  29.       "name": "meta",
  30.       "display": "meta",
  31.       "href": "meta/",
  32.      "is": "/is",
  33.       "writable": "true",
  34.       "val": "1"
  35.     },
  36.     {
  37.       "name": "status",
  38.       "display": "status",
  39.       "href": "status/",
  40.       "is": "/is",
  41.       "val": "0"
  42.     }  ]
  43.   }
  44. }

Many thanks, J