How to load into HTML table just first 5 items from json file with JavaScript and JQuery?

Question

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.

at first glance for sure you have one serious problem there.. when you compose the html content chaining td elements together, maybe you are supposed to use the data object and not the table object. Anyway when you have any kind of problem like this, why don't you first split out the problem? put console.log statements around until you find the exact culprit.. or just use the js debugger embedded in the browser. — Diego D
– Diego D, Commented Jul 5, 2022 at 13:41
the formatToTable() function has a for loop through data.length but when fetching values it does table.history[row_num][2][16].toString() instead of data.history[rownum]... — Diego D
– Diego D, Commented Jul 5, 2022 at 13:47
so saying that we spotted another problem... it's not len(data) but data.length. And for obtaining further help in future cases, I suggest you to read the javascript console for errors so that instead of diagnosing a problem as not working, you actually see what's the exact error and you can eventually report it on your question — Diego D
– Diego D, Commented Jul 5, 2022 at 13:49

Paulo Fernando · Accepted Answer · 2022-07-05 14:04:27Z

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>

Collectives™ on Stack Overflow

How to load into HTML table just first 5 items from json file with JavaScript and JQuery?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related