Reading JSON data and looping through it

Question

I have 3 files

1. index.html
2. data.json
3. app.js

on my WAMP server. I wish to loop through the JSON data and update contents of the HTML file.

These are the contents of my files:

data.json

{
    "user": [{
        "goal": "HTML essential training",
        "type": "Beginner",
        "date": "20/07/2016"
    }, {
        "goal": "CSS essential training",
        "type": "Beginner",
        "date": "30/07/2016"
    }, {
        "goal": "CSS core concepts",
        "type": "Intermediate",
        "date": "10/08/2016"
    }, {
        "goal": "Javascript essential training",
        "type": "Beginner",
        "date": "20/08/2016"
    }, {
        "goal": "Object Oriented JS",
        "type": "Advanced",
        "date": "30/08/2016"
    }]
}

app.js

var request = new XMLHttpRequest();
request.open('GET', 'data.json');
request.onreadystatechange = function() {
    if ((request.readyState === 4) && (request.status === 200)) {
        var items = JSON.parse(request.responseText);
        console.log(items);

        for (var key in items) {
            console.log(key);
            var output = "<tr><td><input type='checkbox' name='record'></td><td>" + items[key].goal + "</td><td>" + items[key].type + "</td><td>" + items[key].date + "</td></tr>";
            console.log(output);
            $("table tbody").append(output);
            output = '';

        }

    }
}

request.send();

When i run this code, one row is created with all the values set to undefined. I think there's a problem with my looping logic.Please help me.

Answer 1

You are running into this since the object returned is a single key: value pair.

You need to access the user property which is an array.

your code

var items=JSON.parse(request.responseText);

The value you get after parsing the json string is the javascript object with key : 'user' and value : which is an array

Supposed to be

var data =JSON.parse(request.responseText);
var items = data.user;   <--  this is an array of objects

// iterate using a for loop, since it is not an object technically
for(var i=0; i < items.length; i++) {

Answer 2

Take a look at the structure of your object:

{
  "user": [
    {
      "goal": "HTML essential training",
      "type": "Beginner",
      "date": "20\/07\/2016"
    },
    {
      "goal": "CSS essential training",
      "type": "Beginner",
      "date": "30\/07\/2016"
    },
    {
      "goal": "CSS core concepts",
      "type": "Intermediate",
      "date": "10\/08\/2016"
    },
    {
      "goal": "Javascript essential training",
      "type": "Beginner",
      "date": "20\/08\/2016"
    },
    {
      "goal": "Object Oriented JS",
      "type": "Advanced",
      "date": "30\/08\/2016"
    }
  ]
}

There's one key, with the value being an array.

You need a loop like this:

          for (var key in items){if (items.hasOwnProperty(key)) {
              for (var i in items[key]) {if (items[key].hasOwnProperty(i)){
                console.log(items[key][i]);
                var output="<tr><td><input type='checkbox' name='record'></td><td>" + items[key][i].goal + "</td><td>" + items[key][i].type +  "</td><td>" + items[key][i].date + "</td></tr>";
                console.log(output);
                $("table tbody").append(output);
                output='';
              }}
          }}