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:

  1.   <body>

  2.      
  3.       <section>

  4.       </section>

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


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

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

  18. {
  19.       "name": "C1",
  20.       "display": "C1",
  21.       "href": "C1",
  22.       "is": "C1"
  23.     }

  24.   ]
  25. }
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.

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

Many thanks, J