使用 JSON 对象制作 html 表答案

【问题标题】：Make an html table using a JSON object使用 JSON 对象制作 html 表
【发布时间】：2020-08-04 23:01:29
【问题描述】：

我知道有很多类似的问题。这段代码是许多其他堆栈溢出问题的科学怪人。但我是如此接近我只是不理解我一直试图很好地使用示例的代码。这是我的html页面：

<!DOCTYPE html>
<html>
    <script src="Scripts.js"></script> 
    <script>


    </script>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>

</head>

<body>

    <p id="demo"></p>


    <script>

      obj.Blades.forEach(element => {
          var name = element.Name + " " + element.Damage;
          document.write(name + "<br >");
      });
    </script>

<input type="button" value="Generate Table" onclick="makeTable()" />
<hr />
<div id="dvTable"></div>

</body>
</html>

这里是 Java Script 页面：


var jsonStuff = '{ "Blades" : [' +
'{ "Name":"Longsword" , "Damage":"l2d" },' +
'{ "Name":"Dagger" , "Damage":"l3d" },' +
'{ "Name":"Mace" , "Damage":"l4d" },' +
'{ "Name":"Spear" , "Damage":"l5d" } ]}'; 


var obj = JSON.parse(jsonStuff);

function makeTable(){
  //Create a HTML Table element.
  var table = document.createElement("TABLE");
  table.border = "1"

 //Get the count of columns.
 var columnCount = Object.keys(obj.Blades).length;

 //Add the header row.
 var row = table.insertRow(-1);
   for (var i = 0; i < columnCount; i++) {
       var headerCell = document.createElement("TH");
       headerCell.innerHTML = obj.Blades[i].Name;
       row.appendChild(headerCell);
   }

    //Add the data rows.
    for (var i = 1; i < obj.Blades.length; i++) {

       row = table.insertRow(-1);
       for (var j = 0; j < columnCount; j++) {
           console.log(obj.Blades[j].Damage);
           var cell = row.insertCell(-1);
           cell.innerHTML = obj.Blades[i][j];
       }
   }

   var dvTable = document.getElementById("dvTable");
   dvTable.innerHTML = "";
   dvTable.appendChild(table);
}

这就是现在的样子：

所以我知道问题一定出在 JavaScript 中注释为“添加数据行”的部分中。我现在才知道该怎么做。

【问题讨论】：

浏览器的图像不是很有帮助。请打开浏览器的开发工具，在浏览器中查看当前生成的 HTML，看看有什么问题。

标签： javascript html json html-table

【解决方案1】：

我相信你的问题出在这条线上：

cell.innerHTML = obj.Blades[i][j];

您将 Blades 视为一个二维数组，而实际上它是一个对象数组。你需要有这样的东西来避免未定义：

cell.innerHTML = obj.Blades[i].Name;
cell.innerHTML = obj.Blades[i].Damage;

【讨论】：

是的，这很有帮助。不再未定义，但正确的信息并没有完全显示。不过谢谢。