使用JSON的Javascript創建表格

Question

我有一個對象中的數據，我試圖在表格中顯示。不幸的是，我所有的欄目都顯示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].keyinfo; // wrong

要訪問他的名字是密鑰信息的值的財產，你需要使用bracket notation，像這樣：

var keyinfo = fifadata[0].fields[j]; 
var test = fifadata[i][keyinfo]; // 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. forEach()，Array.prototype. shift()，HTMLTableElement. insertRow()，HTMLTableRowElement. insertCell()，並Node. textContent}