Create table using Javascript from JSON [duplicate]

Question

I have data in an object that I'm trying to display in a table. Unfortunately, all my columns are displaying 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";
  }
}

If all goes well it should create a table from the JSON data. Can my code be modified slightly? Is there an easier why to do it?

Answer 1

You can't use variables like that in dot notation. You're essentially asking for a property named keyinfo, which doesn't exist.

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

To access the property whose name is keyinfo's value, you'll need to use bracket notation, like so:

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

Have a look at this simplified demo:

(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}]'/>

_{See also: Property Accessors, Array.prototype.forEach(), Array.prototype.shift(), HTMLTableElement.insertRow(), HTMLTableRowElement.insertCell(), and Node.textContent}