Looping through JSON data to populate a table

JavaScript
1

Good afternoon all, I have a json file of US states and their abbreviations (can be found here https://gist.github.com/mshafrir/2646763) and I want to use that to create a table with two columns, first column with the abbreviations, and the second with the state name.

Any suggestions on how to do that? There are a few suggestions on stack overflow that I have tried without much success, for e.g. this one: https://stackoverflow.com/questions/30464675/create-table-from-json-pure-javascript

3 
var stateArray = JSON.parse(states json data here).

function addHeaders(table, keys) {
  var row = table.insertRow();
  for( var i = 0; i < keys.length; i++ ) {
    var cell = row.insertCell();
    cell.appendChild(document.createTextNode(keys[i]));
  }
}

var table = document.createElement('table');
for( var i = 0; i < stateArray.length; i++ ) {

  var state = stateArray[i];
  if(i === 0 ) {
    addHeaders(table, Object.keys(child));
  }
  var row = table.insertRow();
  Object.keys(state).forEach(function(k) {
    console.log(k);
    var cell = row.insertCell();
    cell.appendChild(document.createTextNode(child[k]));
  })
}

document.getElementById('tables').appendChild(table)

This is what I tried so far.

5

Hey Randell, that should say state as the local variable rather than child. Even when I have changed that in my code, I am still not seeing a table as expected.

7

This is what I see (abbreviation and name repeated many times over):

31
31936×212 16.9 KB

9 
document.getElementById("tables").appendChild(table)