CODEWITHSUNDEEP
javascripthtmlcss
Jaeseo Lee
Jaeseo Lee

Reputation: 172

Making a HTML table using Javascript

My data is this:

var manholeInfo = [{name: "manhole", date_key: "date"}]

I would like to make a table like this picture:

Desired output

But it comes out like this:

Actual output

Code:

var iwContent = document.createElement("div");
iwContent.className = 'infowindow';
iwContent.setAttribute('style', "width:160px;text-align:center;padding:5px");

var manholeInfo = [{
  name: "manhole",
  date_key: "2020-10-29"
}]

var table = document.createElement('table');

for (let element of manholeInfo) {
  let row = table.insertRow();
  for (let key in element) {
    let column = row.insertCell();
    column.innerHTML = element[key];
  }
}

iwContent.appendChild(table);
document.body.appendChild(iwContent);

Upvotes: 2

Views: 79

Answers (2)

Shahnawaz Hossan
Shahnawaz Hossan

Reputation: 2720

var iwContent = document.createElement("div");
iwContent.className = 'infowindow';
iwContent.setAttribute('style', "width:250px; text-align:center; padding:5px");

var manholeInfo = [{
    name: "manhole",
    date_key: "2020-10-29"
}]

var table = document.createElement('table');
for (var i = 0; i < manholeInfo.length; i++) {

    var child = manholeInfo[i];

    Object.keys(child).forEach(function (k) {
        // console.log(k);
        var row = table.insertRow();
        var cell_1 = row.insertCell();
        var cell_2 = row.insertCell();
        cell_1.appendChild(document.createTextNode(k));
        cell_2.appendChild(document.createTextNode(child[k]));
    })
}

iwContent.appendChild(table);
document.body.appendChild(iwContent);
td {
    border: solid 1px #ddd;
    border-collapse: collapse;
    padding: 5px 6px;
    text-align: center;
    font-weight: bold;
}

Upvotes: 1

Dan Knights
Dan Knights

Reputation: 8368

Place the table.insertRow inside the inner for loop, and create separate cells for each key/value:

var iwContent = document.createElement("div");
iwContent.className = 'infowindow';
iwContent.setAttribute('style', "width:160px; text-align:center; padding:5px");

var manholeInfo = [{
  name: "manhole",
  date_key: "2020-10-29"
}]

var table = document.createElement('table');

for (let element of manholeInfo) {
  for (let key in element) {
    let row = table.insertRow();
    let columnKey = row.insertCell();
    let columnValue = row.insertCell();

    columnKey.innerHTML = key;
    columnValue.innerHTML = element[key];
  }
}

iwContent.appendChild(table);
document.body.appendChild(iwContent);

Upvotes: 3

Related Questions