creating table from json data

Question

I have some JSON data which I want to create a table from it but I am getting this error from the console: TypeError: obj.labels[i].getAttribute is not a function . creating the table header is okay, I only get the error when I try to populate the table with data.

I want the car table to have the header [id, carname, year, registration]

The error is coming from this line: span.innerText = obj.labels[i].getAttribute(attrs[j]);

I don't know why I am getting the error, I need some help extracting the car data and populate the table.

 var attrs = ["id", "name", "year", "registration"]; var jsonString = '{\\n' + ' "labels": [\\n' + ' {\\n' + ' "name": "test",\\n' + ' "age": 33,\\n' + ' "contact": test,\\n' + ' "cars": [\\n' + ' {"id": 2222, "carname": "ford", "year": 2000, "registration": cd60}\\n' + ' {"id": 3333, "carname": "BMW", "year": 2012, "registration": fs41}\\n' + ' ]\\n' + ' }\\n' + ' ]\\n' + '}\\n' + ''; var obj = JSON.parse(jsonString); //create table var myTableDiv = document.getElementById("mytable") var table = document.createElement('table'); var tableBody = document.createElement('tbody'); table.appendChild(tableBody); //header for (var i = 0; i < obj.labels.length; i++) { var tr = document.createElement('tr'); for (var j = 0; j < attrs.length; j++) { var td = document.createElement('th'); td.width = '75'; var span = document.createElement("span"); span.innerText = attrs[j]; td.appendChild(span); tr.appendChild(td); } tableBody.appendChild(tr); } //body for (var i = 0; i < obj.labels.length; i++) { var tr = document.createElement('tr'); for (var j = 0; j < attrs.length; j++) { var td = document.createElement('td'); td.width = '75'; var span = document.createElement("span"); span.innerText = obj.labels[i].getAttribute(attrs[j]); td.appendChild(span); tr.appendChild(td); } tableBody.appendChild(tr); } myTableDiv.appendChild(table) 

Answer 1

If I understand your question correctly you want to display car details in a HTML table. Your input JSON data structure is as follows:

• labels has a set of objects (let's say each of these is label )
• each label has properties and a set of cars
• each car has properties

To access car details your code will like:

var attrs = ["id", "carname", "year", "registration"];
var jsonString =
    '{\n' +
    '    "labels": [\n' +
    '        {\n' +
    '            "name": "test",\n' +
    '            "age": 33,\n' +
    '            "contact": "test",\n' +
    '            "cars": [\n' +
    '                {"id": 2222, "carname": "ford", "year": 2000, "registration": "cd60"},\n' +
    '                {"id": 3333, "carname": "BMW", "year": 2012, "registration": "fs41"}\n' +
    '            ]\n' +
    '        }\n' +
    '    ]\n' +
    '}\n' +
    '';

var obj = JSON.parse(jsonString);
console.log(obj)
for (var i = 0; i < obj.labels.length; i++) {
    for (var j = 0; j < obj.labels[i]['cars'].length; j++) {
        for (var k = 0; k < attrs.length; k++) {
            console.log(obj.labels[0]['cars'][j][attrs[k]])
        }
        console.log("=========")
    }
}

Edit

The above iteration may look like very basic. Here are the short forms of the above for loop:

If you want to refer to attrs to read car attributes:

[...obj.labels].forEach(element => {
    element['cars'].forEach(car => {
        for (var i = 0; i < attrs.length; i++) {
            console.log(car[attrs[i]]);
        }
    });
});

If you want to read all car attributes:

[...obj.labels].forEach(element => {
    element['cars'].forEach(car => Object.keys(car).map(attr => 
        console.log(attr + " " + car[attr])));
});