var searchList;
window.onload = function init(){
console.log('DOM is ready');
searchList = document.querySelector('.list');
searchList.addEventListener('click', list);
}
function list(evt) {
var url = 'https://gist.githubusercontent.com/heiswayi/7fde241975ed8a80535a/raw/ff1caaeaf62bd6740ab7cafcd61f1215de173379/datatables-data.json';
fetch(url)
.then(function(data){
return data.json();
})
.then(function(data){
buildTableFor(data);
})
.catch(function(err){
console.log('The following error has been occured ' + err);
});
}
function buildTableFor(users) {
var tableContainer = document.querySelector('.table-container');
tableContainer.innerHTML = '';
var table= document.createElement('table');
var caption = table.createCaption();
var thead = table.createTHead();
thead.innerHTML = '<tr>' + '<th>NAME AND LAST NAME</th>' + '<th>JOB</th>' + '<th>CITY</th>' + '<th>AGE</th>' +
'<th>DATE</th>' + '<th>SALARY</th>' +
'</tr>';
var tbody = table.createTBody();
var tfoot = table.createTFoot();
tfoot.innerHTML = '<tr><th colspan="6">OUR CUSTOMER</th></tr>';
users.data.forEach(function(user, index){
var row = table.insertRow();
user.forEach(function(prop){
var cell = row.insertCell();
cell.innerHTML = prop;
});
tbody.append(row);
});
tableContainer.append(table);
}
JS.JSON.FetchingData.PopulateTable.ex8
--------------------------------------
A [Pen](https://codepen.io/Onlyforbopi/pen/NOWLXd) by [Pan Doul](https://codepen.io/Onlyforbopi) on [CodePen](https://codepen.io).
[License](https://codepen.io/Onlyforbopi/pen/NOWLXd/license).