I’m creating a table in in which the data is being gotten from a JSON file. this is the code
var myObj, i, t = document.querySelector("#data_table");
myObj = {
name: “John”,
age: 30,
cars: [
{name: “Ford”, models: [“Fiesta”, “Focus”, “Mustang”]},
{name: “BMW”, models: [“320”, “X3”, “X5”]},
{name: “Fiat”, models: [“500”, “Panda”]}
]
};
for (i in myObj.cars) {
var _row = t.insertRow(-1);
//insert the vehicle name
var c = _row.insertCell(-1);
c.innerHTML = myObj.cars[i].name;
c.style.fontWeight = “bolder”;
for (var j = 0; j < myObj.cars[i].models.length; j++) {
var _c = _row.insertCell(-1);
_c.innerHTML = myObj.cars[i].models[j];
}
}
my problem now is the name of the cars are appear on in a single column instead of a row (e.g they should be the table header for each column). but i havent been able to figure it out. your help would be appreciated.
