javascript - 使用 Javascript 从 JSON 创建表

Question

这个问题已经有答案了:

how to access object property using variable [duplicate] (2 个回答)

已关闭 8 年前。

我试图在表格中显示一个对象中的数据。不幸的是，我的所有列都显示 undefined .

  var fifadata = [{
    "fields": ["id", "country", "alternate_name", "fifa_code", "group_id", "group_letter", "wins", "draws", "losses", "games_played", "points", "goals_for", "goals_against", "goal_differential"]
  }, {
    "id": 1,
    "country": "Brazil",
    "alternate_name": null,
    "fifa_code": "BRA",
    "group_id": 1,
    "group_letter": "A",
    "wins": 4,
    "draws": 1,
    "losses": 2,
    "games_played": 7,
    "points": 13,
    "goals_for": 11,
    "goals_against": 14,
    "goal_differential": -3
  }, {
    "id": 2,
    "country": "Croatia",
    "alternate_name": null,
    "fifa_code": "CRO",
    "group_id": 1,
    "group_letter": "A",
    "wins": 1,
    "draws": 0,
    "losses": 2,
    "games_played": 3,
    "points": 3,
    "goals_for": 6,
    "goals_against": 6,
    "goal_differential": 0
  }, {
    "id": 3,
    "country": "Mexico",
    "alternate_name": null,
    "fifa_code": "MEX",
    "group_id": 1,
    "group_letter": "A",
    "wins": 2,
    "draws": 1,
    "losses": 1,
    "games_played": 4,
    "points": 7,
    "goals_for": 5,
    "goals_against": 3,
    "goal_differential": 2
  }];
var body = document.getElementsByTagName('body')[0];
var table = document.createElement("table");
var thead = document.createElement("thead");
var tbody = document.createElement("tbody");
var th = document.createElement("th");
var caption = document.createElement('caption');
var cap = document.createTextNode("Game Results List");
caption.appendChild(cap);
caption.style.fontWeight = "900";
table.appendChild(caption);
body.appendChild(table);
table.style.border = "1px dashed red";
table.style.borderSpacing = "1px";
table.style.textAlign = "center";

//table head(correct)

for (i = 0; i < 1; i++) {
  var tr = document.createElement("tr");
  thead.appendChild(tr);
  table.appendChild(thead);
  for (j = 0; j < fifadata[0].fields.length; j++) {
    var th = document.createElement("th");
    var keyname = fifadata[0].fields[j];
    var tm = document.createTextNode(keyname);
    th.appendChild(tm);
    tr.appendChild(th);
    th.style.border = "1px dashed blue";
    th.style.padding = "5px";
  }
}

//table body(incorrect).
//I need to use a dynamically created property(i.e. keyinfo) in "var text"
//i.e.fifadata[i].keyinfo; should change into fifadata[1].ID when it is 
//excecuted.

for (i = 1; i < fifadata.length; i++) {
  var tr = document.createElement("tr");
  tbody.appendChild(tr);
  table.appendChild(tbody);
  for (j = 0; j < fifadata[0].fields.length; j++) {
    var td = document.createElement("td");
    var keyinfo = fifadata[0].fields[j];
    var test = fifadata[i].keyinfo;
    var tn = document.createTextNode(test);
    td.appendChild(tn);
    tr.appendChild(td);
    td.style.border = "1px dashed green";
    td.style.padding = "2px";
  }
}

如果一切顺利，它应该根据 JSON 数据创建一个表。我的代码可以稍微修改一下吗？有更简单的理由吗？

Answer 1

您不能使用 dot notation 中那样的变量。您实质上是在请求一个名为 keyinfo 的属性，不存在。

var keyinfo = fifadata[0].fields[j];
var test = fifadata[i]<b>.keyinfo</b>; // wrong

要访问名称为 keyinfo 的值的属性，您需要使用 bracket notation ，像这样:

var keyinfo = fifadata[0].fields[j];
var test = fifadata[i]<b>[keyinfo]</b>; // right

看看这个简化的演示:

(function() {

  // loading data from a hidden input to declutter the demo script
  var fifadata = JSON.parse(document.getElementById("fifadata").value);

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

  var thead = table.appendChild(document.createElement("thead"));

  var tbody = table.appendChild(document.createElement("tbody"));

  var row = thead.insertRow(-1);

  // remove the first item in fifadata and get a reference to its fields property
  var fieldNames = fifadata.shift().fields;

  // create column headers
  fieldNames.forEach(function(fieldName) {
    row.appendChild(document.createElement("th")).textContent = fieldName;
  });

  // populate tbody rows
  fifadata.forEach(function(record) {
    row = tbody.insertRow(-1);
    fieldNames.forEach(function(fieldName) {
      // note that we use bracket notation to access the property
      row.insertCell(-1).textContent = record[fieldName];
    });
  });

  // add the table to the body once fully constructed
  document.body.appendChild(table);

})();

<input type="hidden" id="fifadata" value='[{"fields":["id","country","alternate_name","fifa_code","group_id","group_letter","wins","draws","losses","games_played","points","goals_for","goals_against","goal_differential"]},{"id":1,"country":"Brazil","alternate_name":null,"fifa_code":"BRA","group_id":1,"group_letter":"A","wins":4,"draws":1,"losses":2,"games_played":7,"points":13,"goals_for":11,"goals_against":14,"goal_differential":-3},{"id":2,"country":"Croatia","alternate_name":null,"fifa_code":"CRO","group_id":1,"group_letter":"A","wins":1,"draws":0,"losses":2,"games_played":3,"points":3,"goals_for":6,"goals_against":6,"goal_differential":0},{"id":3,"country":"Mexico","alternate_name":null,"fifa_code":"MEX","group_id":1,"group_letter":"A","wins":2,"draws":1,"losses":1,"games_played":4,"points":7,"goals_for":5,"goals_against":3,"goal_differential":2}]'/>

_{另请参阅:Property Accessors , Array.prototype.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" rel="noreferrer noopener nofollow">forEach()</a> , Array.prototype.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift" rel="noreferrer noopener nofollow">shift()</a> , HTMLTableElement.<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement.insertRow" rel="noreferrer noopener nofollow">insertRow()</a> , HTMLTableRowElement.<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement.insertCell" rel="noreferrer noopener nofollow">insertCell()</a> ，和Node.<a href="https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent" rel="noreferrer noopener nofollow">textContent</a>}