JSON to Table

by Joe Saad

HTML

<table id="mytable">
  <thead>
    <tr></tr>
  </thead>
  <tbody></tbody>
</table>

SCSS

table,
tr,
th,
td {
  border: 1px solid;
  border-collapse: collapse;
}

th {
  text-transform: uppercase;
  font-size: smaller;
}

tr:nth-child(even) td {
  background-color: #eaeaea;
}

tr:hover td {
  background-color: #ccc;
}

JavaScript

var data = [{
  "id": 1,
  "gender": "Female",
  "first_name": "Nancy",
  "last_name": "Smith",
  "email": "[email protected]",
  "ip_address": "9.250.10.151"
}, {
  "id": 2,
  "gender": "Male",
  "first_name": "Harry",
  "last_name": "Warren",
  "email": "[email protected]",
  "ip_address": "35.135.137.166"
}, {
  "id": 3,
  "gender": "Male",
  "first_name": "Jonathan",
  "last_name": "Griffin",
  "email": "[email protected]",
  "ip_address": "0.150.138.148"
}, {
  "id": 4,
  "gender": "Male",
  "first_name": "Wayne",
  "last_name": "Boyd",
  "email": "[email protected]",
  "ip_address": "202.198.134.171"
}, {
  "id": 5,
  "gender": "Female",
  "first_name": "Ruby",
  "last_name": "Cook",
  "email": "[email protected]",
  "ip_address": "152.187.138.194"
}];


for (key in data[0]) {
  $('#mytable thead tr').append("<th>" + key + "</th>");
}

for (var i = 0; i < data.length; i++) {
  $('#mytable tbody').append('<tr></tr>');
  var row = i + 1;
  for (prop in data[i]) {
    $('tbody tr:nth-child(' + row + ')').append('<td id=name' + row + '>' + data[i][prop] + '</td>');
  }
}