I want to display first e.g. 5 items from json file using JavaScript/JQuery.
I have the following .json file named draws.json which is like this:
{"history": [["2022-07-04", "22:50", [5, 8, 10, 15, 17, 19, 21, 24, 28, 31, 36, 40, 47, 57, 58, 60, 61, 62, 78, 79], 756, 37.8], ["2022-07-04", "15:00", [5, 7, 9, 11, 15, 16, 17, 22, 25, 26, 31, 34, 40, 42, 45, 46, 59, 60, 65, 78], 653, 32.65], ["2022-07-03", "22:50", [1, 2, 10, 15, 16, 22, 24, 27, 29, 37, 38, 48, 51, 53, 66, 69, 71, 73, 74, 77], 803, 40.15], ["2022-07-03", "15:00", [4, 8, 11, 13, 18, 19, 24, 36, 42, 46, 48, 51, 57, 60, 63, 67, 68, 72, 73, 76], 856, 42.8], ["2022-07-02", "22:50", [2, 3, 5, 6, 8, 9, 10, 13, 24, 34, 37, 39, 44, 45, 48, 54, 55, 56, 64, 67], 623, 31.15], ["2022-07-02", "15:00", [4, 5, 9, 11, 12, 13, 19, 20, 31, 35, 39, 43, 45, 49, 52, 56, 59, 60, 72, 75], 709, 35.45]}
This is just a small part of it. I want to display only first 5 items from it.
One single item would be for example:
["2022-07-04", "22:50", [5, 8, 10, 15, 17, 19, 21, 24, 28, 31, 36, 40, 47, 57, 58, 60, 61, 62, 78, 79], 756, 37.8]
I want to load into my HTML table just date, hour and the array with numbers without last two items which are in this case 756 and 37.8.
For this I have created the following code which, for some reason does’n insert any row into the table body even I did selection well and the json file is read.
index.html:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style src="style/main.css"></style>
<script src="scripts/show_json.js"></script>
</head>
<body>
<div id="error_message" style="display:none">
<br>
<br>
<p align="center">The following errors occurred:</p>
<br>
<p id="xhr" align="center"></p>
<p id="msg" align="center"></p>
</div>
<div class="container">
<div class="table-responsive">
<h1 align="center">CSV File to HTML Table Using AJAX jQuery</h1>
<br />
<br />
<table id="draws_table">
<thead>
<tr>
<th>Date</th>
<th>Hour</th>
<th>N1</th>
<th>N2</th>
<th>N3</th>
<th>N4</th>
<th>N5</th>
<th>N6</th>
<th>N7</th>
<th>N8</th>
<th>N9</th>
<th>N10</th>
<th>N11</th>
<th>N12</th>
<th>N13</th>
<th>N14</th>
<th>N15</th>
<th>N16</th>
<th>N17</th>
<th>N18</th>
<th>N19</th>
<th>N20</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</body>
</html>
show_json.js:
function ajaxGetJson() {
var hr = new XMLHttpRequest();
hr.open("GET", "draws.json", true);
hr.setRequestHeader("Content-type", "application/json", true);
hr.onreadystatechange = function () {
if (hr.readyState == 4 && hr.status == 200) {
var data = JSON.parse(hr.responseText);
formatToTable(data);
} else {
document.getElementById("error_message").style.display = "block"
$("p#xhr").text(xhr.status);
$("p#msg").text(thrownError);
}
}
hr.send(null);
}
function formatToTable(data) {
var table = document.querySelector("#draws_table tbody");
for (var x = 0; x < len(data); x++) {
table.innerHTML = '<tr>' +
'<td>' + table.history[row_num][0].toString() + '</td>' +
'<td>' + table.history[row_num][1].toString() + '</td>' +
'<td>' + table.history[row_num][2][0].toString() + '</td>' +
'<td>' + table.history[row_num][2][1].toString() + '</td>' +
'<td>' + table.history[row_num][2][2].toString() + '</td>' +
'<td>' + table.history[row_num][2][3].toString() + '</td>' +
'<td>' + table.history[row_num][2][4].toString() + '</td>' +
'<td>' + table.history[row_num][2][5].toString() + '</td>' +
'<td>' + table.history[row_num][2][6].toString() + '</td>' +
'<td>' + table.history[row_num][2][7].toString() + '</td>' +
'<td>' + table.history[row_num][2][8].toString() + '</td>' +
'<td>' + table.history[row_num][2][9].toString() + '</td>' +
'<td>' + table.history[row_num][2][10].toString() + '</td>' +
'<td>' + table.history[row_num][2][11].toString() + '</td>' +
'<td>' + table.history[row_num][2][12].toString() + '</td>' +
'<td>' + table.history[row_num][2][13].toString() + '</td>' +
'<td>' + table.history[row_num][2][14].toString() + '</td>' +
'<td>' + table.history[row_num][2][15].toString() + '</td>' +
'<td>' + table.history[row_num][2][16].toString() + '</td>' +
'<td>' + table.history[row_num][2][17].toString() + '</td>' +
'<td>' + table.history[row_num][2][18].toString() + '</td>' +
'<td>' + table.history[row_num][2][19].toString() + '</td>' +
+ '</tr>' + table.innerHTML;
};
}
I have also converted .toString() any number thinking that this is the problem but it seems even so it is not working at all because it does’n insert any row into the table body.
Any help, please?
Thank you in advance!
P.S. I have found this topic which is looking for the same thing (somehow) but the json file is different and not so nested. I took some code from there but it seems it doesn’t work either and also I need just first 5 items not all the json file. Just saying this to avoid possible duplicate warnings because I’ve already read all possible topics on this subject and even they are somehow similar they have different json files and they are asking for some other things.
Advertisement
Answer
Maybe this is what you need?
show_json.js:
function ajaxGetJson() {
var hr = new XMLHttpRequest();
hr.open('GET', 'draws.json', true);
hr.setRequestHeader('Content-type', 'application/json', true);
hr.onload = function () {//==> CHANGED TO ONLOAD
if (hr.readyState == 4 && hr.status == 200) {
var data = JSON.parse(hr.responseText);
formatToTable(data.history); // PASSING THE HISTORY
} else {
document.getElementById('error_message').style.display = 'block';
$('p#xhr').text(xhr.status);
$('p#msg').text(xhr.thrownError);
}
};
hr.send(null);
}
function formatToTable(data) {
var table = document.querySelector('#draws_table tbody');
for (var x = 0; x < 5; x++) { //5 FIRST RECORDS OF THE JSON
let date = data[x][0];
let hour = data[x][1];
let htmlTR = '<tr>';
htmlTR += `<td>${date}</td>`;
htmlTR += `<td>${hour}</td>`;
//ADD ALL 20 NUMBERS
for (let i = 0; i < 20; i++) {
let NN = data[x][2][i];
htmlTR += `<td>${NN}</td>`;
}
htmlTR += '</tr>';
table.innerHTML += htmlTR;
}
}
index.html:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style src="style/main.css"></style>
<script src="scripts/show_json.js"></script>
</head>
<body>
<div id="error_message" style="display: none">
<br />
<br />
<p align="center">The following errors occurred:</p>
<br />
<p id="xhr" align="center"></p>
<p id="msg" align="center"></p>
</div>
<div class="container">
<div class="table-responsive">
<h1 align="center">CSV File to HTML Table Using AJAX jQuery</h1>
<br />
<br />
<table id="draws_table">
<thead>
<tr>
<th>Date</th>
<th>Hour</th>
<th>N1</th>
<th>N2</th>
<th>N3</th>
<th>N4</th>
<th>N5</th>
<th>N6</th>
<th>N7</th>
<th>N8</th>
<th>N9</th>
<th>N10</th>
<th>N11</th>
<th>N12</th>
<th>N13</th>
<th>N14</th>
<th>N15</th>
<th>N16</th>
<th>N17</th>
<th>N18</th>
<th>N19</th>
<th>N20</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<script type="text/javascript">
ajaxGetJson(); <!-- HAD TO CALL IT SOMEWHERE.. -->
</script>
</body>
</html>