reading nested JSON using JavaScript

Question

I'm trying to read the nested content of a JSON file using JavaScript.

Here is my JavaScript:

<script>
var obj, xmlhttp, myObj, x, txt = "";
var request = new XMLHttpRequest();
request.open('GET', 'https://private-c01be-moneyadviceservice.apiary-mock.com/locale/categories.json');
request.setRequestHeader("Content-type", "application/json");
request.onreadystatechange = function () {
if (this.readyState === 4) {
console.log('Status:', this.status);
console.log('Headers:', this.getAllResponseHeaders());
console.log('Body:', this.responseText);

  myObj = JSON.parse(this.responseText);

   for (x in myObj) {
        txt += "<h2>" + myObj[x].title + "</h2><p>" + myObj[x].description + "</p><br/>";
        txt += "<h3>" + myObj[x].contents.title + "</h3><p>" + myObj[x].contents.description + "</p><br/>";
    }

    document.getElementById("MAS").innerHTML = txt; 
  }
};

request.send();
</script>

And here is the JSON file:

 {
    "id": "life-events",
    "type": "category",
    "title": "Life events",
    "description": "When big things happen - having a baby, losing your job, getting divorced or retiring\n - it helps to be in control of your money\n",
    "contents": [
        {
            "id": "setting-up-home",
            "type": "category",
            "title": "Setting up home",
            "description": "Deciding whether to rent or buy, working out what you can afford and managing\n money when sharing with others\n",
            "contents": [
            ]
        },
        {
            "id": "young-people-and-money",
            "type": "category",
            "title": "Leaving school or college",
            "description": "",
            "contents": [
            ]
        },
        {
            "id": "having-a-baby",
            "type": "category",
            "title": "Having a baby",
            "description": "",
            "contents": [
            ]
        }
    ]
},

The nested JSON is showing as 'Undefined'. How do I access the nested data?

I've read countless posts about this topic but none have really helped in this instance

Contents is an array of objects. You need to loop through that and get myObj[x].contents[y].title for example. — Christopher
– Christopher, Commented Apr 4, 2017 at 15:34
@Christopher I also noticed that. You should post this as answer. — Luis Estevez
– Luis Estevez, Commented Apr 4, 2017 at 15:35
@LuisEstevez you can go ahead if you'd like. I'm on my phone so it's a bit of a hassle. :) — Christopher
– Christopher, Commented Apr 4, 2017 at 15:36

Lotus91 · Accepted Answer · 2017-04-04 15:39:04Z

2

You need to loop over the contents as well because they are arrays like below :

   for (x in myObj) {
     txt += "<h2>" + myObj[x].title + "</h2><p>" + myObj[x].description + "</p><br/>";
     for(y in myObj[x].contents){
    txt += "<h3>" + myObj[x].contents[y].title + "</h3><p>" + myObj[x].contents[y].description + "</p><br/>";
     }
   }

Here is a JSBin.

edited Apr 4, 2017 at 15:39

answered Apr 4, 2017 at 15:36

Lotus91

1,1234 gold badges18 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Christopher Over a year ago

I would guess that OP wants line 3 to remain in the outer loop, just sayin'

Master Po · Accepted Answer · 2017-04-04 15:38:31Z

1

You can't access myObj[x].contents.title since contents is an array. Need to iterate myObj[x].contents for it's properties.

answered Apr 4, 2017 at 15:38

Master Po

1,7173 gold badges27 silver badges45 bronze badges

Collectives™ on Stack Overflow

reading nested JSON using JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related