Loop through JSON data and appendChild is putting data in one row?

Question

Background: I thought that I was going to end up with a dynamically created table that had the same number of <TR> tags as entries in the JSON data.

Result: The loop is only creating one table TR and putting all the data in one row.

Below is a snippet of the loop and table creation.

var tbl = document.createElement("table");
  var tblBody = document.createElement("tbody");
  var row = document.createElement("tr");
    var tdname = document.createElement('td');
    var tddate = document.createElement('td');
    var tdassigned = document.createElement('td');


    for (var i in data) {

    console.log("Hello world!" + i);
    tdname.appendChild(document.createTextNode(data[i].name));
    tddate.appendChild(document.createTextNode(data[i].date));
    tdassigned.appendChild(document.createTextNode(data[i].assigned));
    row.appendChild(tdname);
    row.appendChild(tddate);
    row.appendChild(tdassigned);


    }
    tblBody.appendChild(row);

    tbl.appendChild(tblBody);
    document.getElementById("tasklist").appendChild(tbl);

Question: Do I need to create a unique row variable for each loop?

I was hoping to keep it all vanilla if possible. This is more of a learning/training exercise so I guess there is no wrong answer. — Denoteone, May 17 '19 at 00:39

Miroslav Glamuzina · Accepted Answer · 2019-05-17T00:45:43.113

1

There were a couple of issues:

You're appending the text to the td, without clearing them. You can instead do document.createElement('td') within the loop for each of your data points.
You need a row for each iteration of data, this can also be done within the loop.
Please use let and const in place of var. Please see this post for more information.

Try something like this:

const data = [{
    name: 'name1',
    date: 'date1',
    assigned: 'assigned1'
  },
  {
    name: 'name2',
    date: 'date2',
    assigned: 'assigned2'
  },
  {
    name: 'name3',
    date: 'date3',
    assigned: 'assigned3'
  },
];

let tbl = document.createElement("table");
let tblBody = document.createElement("tbody");
data.forEach(d => {
  let row = document.createElement("tr");
  row.appendChild(document.createTextNode(d.name));
  row.appendChild(document.createTextNode(d.date));
  row.appendChild(document.createTextNode(d.assigned));
  tblBody.appendChild(row);
});

tbl.appendChild(tblBody);
document.getElementById("tasklist").appendChild(tbl);

<div id='tasklist'></div>

Hope this helps,

edited May 17 '19 at 00:45

answered May 17 '19 at 00:40

Miroslav Glamuzina

4,472
2
19
33

So creating the row variable each loop increment is what I was missing? I appreciate the help i will test now. Thanks! If anyone has feedback on my mistake that is always welcome too. – Denoteone May 17 '19 at 00:45
Yup, I've updated my answer to be a little more specific :) – Miroslav Glamuzina May 17 '19 at 00:46
Great thanks for the feedback and that solution works perfect. Again I appreciate the background on "Why" Checked. – Denoteone May 17 '19 at 00:50
No problem, glhf – Miroslav Glamuzina May 17 '19 at 00:51

score 0 · Answer 2 · answered May 17 '19 at 01:51

If data is an array of objects, start with an array method like .map() or .forEach() (demo uses .foreach() since a new array isn't really needed to make a table).
That will iterate through the array using .insertRow() for each object. Now convert each object into an element of it's values with Object.values() or Object.keys() (demo uses Object.values() which saves a step).
Now iterate through the array of values with .forEach() or .map() and .insertCell() then .textContent the values to the cells.

let data = [{
    name: 'John Doe',
    date: '1/1/19',
    assigned: 'A'
  },
  {
    name: 'Jane Doe',
    date: '2/1/819',
    assigned: 'B'
  },
  {
    name: 'Darth Vader',
    date: '3/11/19',
    assigned: 'C'
  },
  {
    name: 'Obi Wan',
    date: '4/20/19',
    assigned: 'D'
  }
];

const frag = document.createDocumentFragment();
const tbl = document.createElement("table");
const tblB = document.createElement("tbody");
tbl.appendChild(tblB);
frag.appendChild(tbl);

data.forEach((obj, idx) => {
  let row = tblB.insertRow();
  Object.values(obj).forEach(val => {
    let cell = row.insertCell();
    cell.textContent = val;
  });
});

document.body.appendChild(frag);

score -1 · Answer 3 · answered May 17 '19 at 00:48

I just saw your comment that you prefer vanilla js. Here's the jquery way if interested.

var data = [
    { Column1: "col1row1", Column2: "col2row1" },
    { Column1: "col1row2", Column2: "col2row2" }
];

$("#tasklist")
    .append($('<table>')
        .append($('<tbody>')));

var tbody = $("#tasklist > table > tbody");

$.each(data, function (idx, item) {
    $(tbody).append($('<tr>')
        .append($('<td>')
            .text(item.Column1)
        )
        .append($('<td>')
            .text(item.Column2)
        )
    );
});

Loop through JSON data and appendChild is putting data in one row?

3 Answers3