javascript - 表格数据未从我的 JavaScript 代码插入到我的表格中

Question

我对 JavaScript 很陌生。我正在尝试使用 Javascript 将 someObject 数据插入到我的表中。但不幸的是，我的代码不起作用。我不清楚我哪里出错了。请在下面找到我的代码。任何帮助都会对我很有帮助。

  function myFunction(){
  var data = '{ "name":"John", "age":30, "city":"New York"}'
  var obj = JSON.parse(data);
  var toSHow = document.getElementById("datum");//my table ID is datum
var empData = "";
  for(var i=0; i<obj.length; i++)
    empData += '<tr>';
    empData += '<td>'+data.name+'</td>';
    empData += '<td>'+data.age+'</td>';
    empData += '<td>'+data.city+'</td>';
    empData += '</tr>';
  }

}
toSHow.append(empData);
</script>

标签： javascript

Answer 1

我对您的代码进行了一些调整并对其进行了评论：

function myFunction(){
    var data = '[{"name":"John", "age":30, "city":"New York"}, {"name":"Doe", "age":25, "city":"LA"}]' // Converted to array and added second element for example
    var obj = JSON.parse(data);
    var toSHow = document.getElementById("datum");//my table ID is datum

    for(var i=0; i < obj.length; i++) {
        // Reset empData every loop
        var empData = "";

        // Create new element to attach instead of adding plain text
        var newTr = document.createElement('tr');

        // Get data from object by index
        empData += '<td>'+obj[i].name+'</td>';
        empData += '<td>'+obj[i].age+'</td>';
        empData += '<td>'+obj[i].city+'</td>';

        // Set table data
        newTr.innerHTML = empData;

        // Append row every loop
        toSHow.append(newTr);

    }
}