JSON to Table

by Joe Saad

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.2.0/list.min.js"></script>
<div id="entries">
  <table id="mytable">
    <thead>
      <tr></tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

SCSS

.list {
  font-family:sans-serif;
}
td {
  padding:10px; 
  border:solid 1px #eee;
}

input {
  border:solid 1px #ccc;
  border-radius: 5px;
  padding:7px 14px;
  margin-bottom:10px
}
input:focus {
  outline:none;
  border-color:#aaa;
}

.sort:hover {
  text-decoration: none;
  background-color:#1b8aba;
}
.sort:focus {
  outline:none;
}

.sort.asc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  content:"";
  position: relative;
  top:4px;
  right:-5px;
}
.sort.desc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #fff;
  content:"";
  position: relative;
  top:-4px;
  right:-5px;
}

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"
}];

//class="sort" data-sort="name"

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

$('table tbody').addClass('list');

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

var options = {
  valueNames: []
};

for (prop in data[0]) {
  options.valueNames.push(prop);
}

console.log(options.valueNames);

var userList = new List('entries', options);