onlyforbopi
9/28/2018 - 1:01 PM
JS.JSON.FetchingData.PopulateTable.ex6
JS.JSON.FetchingData.PopulateTable.ex6
table {
width:100%;
border:1px solid;
border-collapse: collapse;
}
tr, th, td {
border:1px solid;
font-family:courier;
}
td {
text-align:center;
padding:10px;
}
fieldset {
padding:10px;
border-radius:10px;
}
label {
display:inline-block;
margin-bottom:10px;
}
#input:invalid {
background-color:pink;
}
#input:valid {
background-color:lightgreen;
}
#sub{
visibility:hidden;
}
var inicio=0;
var final=15;
var users={};
function createTable(users){
for(var i=0;i<users.data.length;i++){
var givenName=users.data[i][0];
var proffesion=users.data[i][1];
var city=users.data[i][2];
var age=users.data[i][3];
var dateStart=users.data[i][4];
var earnings=users.data[i][5];
var table = document.querySelector("#myTable");
var row = table.insertRow();
row.innerHTML = "<td>"+i+"</td><td>"+givenName+"</td><td>"+proffesion+"</td><td>"+city+"</td><td>"+age+"</td><td>"+dateStart+"</td><td>"+earnings+"</td>";
}
}
function init(){
search();
}
function search() {
var queryURL = "https://gist.githubusercontent.com/heiswayi/7fde241975ed8a80535a/raw/ff1caaeaf62bd6740ab7cafcd61f1215de173379/datatables-data.json";
var xhr = new XMLHttpRequest();
xhr.open('GET', queryURL, true);
// called when the response is arrived
xhr.onload = function(e) {
var jsonResponse = xhr.response;
// turn the response into a JavaScript object
users = JSON.parse(jsonResponse);
createTable(users);
}
// in case of error
xhr.onerror = function(err) {
console.log("Error: " + err);
}
// sends the request
xhr.send();
} <body onload="init();">
<table id="myTable">
<caption></caption>
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Proffesion</th>
<th scope="col">City</th>
<th scope="col">Age</th>
<th scope="col">Date of start</th>
<th scope="col">Earnings</th>
</tr>
</table>
</body>