遍历 JSON 数据并且 appendChild <TR> 将数据放在一行中？

Question

背景： 我以为我最终会得到一个动态创建的 table，它具有与条目相同数量的 <TR> 标签JSON 数据。

结果： 循环只创建一个 table TR 并将所有数据放在一行中。

下面是循环和 table 创建的片段。

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);

问题：我是否需要为每个循环创建一个唯一的行变量？

Answer 1

有几个问题：

您将文本附加到 td，但没有清除它们。您可以在循环中为每个数据点执行 document.createElement('td')。
每次数据迭代都需要一行，这也可以在循环内完成。
请使用let and const in place of var. Please see this post获取更多信息。

尝试这样的事情：

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>

希望这对您有所帮助，

Answer 2

我刚刚看到你的评论说你更喜欢 vanilla js。如果有兴趣，这里是 jquery 方式。

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)
        )
    );
});

Answer 3

如果 data 是一个对象数组，则从 .map() 或 .forEach() 之类的数组方法开始（演示使用 .foreach()，因为新数组实际上不是需要制作 table）。
这将对每个对象使用 .insertRow() 遍历数组。现在使用 Object.values() 或 Object.keys() 将每个对象转换为其值的一个元素（演示使用 Object.values() 可以节省一个步骤）。
现在使用 .forEach() 或 .map() 和 .insertCell() 遍历值数组，然后 .textContent 将值传递给单元格。

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);

遍历 JSON 数据并且 appendChild <TR> 将数据放在一行中？

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

javascript

for-loop

html-table

appendchild