Hi in need help arranging this table

Hi in need help arranging this table
0

#1

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.


#2

Do you have a codepen for this which show the html, js, and css? It would be easier to visualize what is happening.


#3

Please show what the table should look like - right now the table is:

Ford Fiesta Focus Mustang
BMW 320 X3 X5
Fiat 500 Panda


#4

This is what i want it to look like