2

I am trying to convert the Array to an HTML Table using jQuery. However, the browser shows nothing from the JSON file. Please see my codes below.

JSON file 

[
{
    "Book ID": "1",
    "Book Name": "Computer Architecture",
    "Category": "Computers",
    "Price": "125.60"
},
{
    "Book ID": "2",
    "Book Name": "Asp.Net 4 Blue Book",
    "Category": "Programming",
    "Price": "56.00"
},
{
    "Book ID": "3",
    "Book Name": "Popular Science",
    "Category": "Science",
    "Price": "210.40"
}

]

HTML and JS

<script>
$(document).ready(function () {
    $.getJSON("result.json", function (data) {

        var arrItems = [];      // THE ARRAY TO STORE JSON ITEMS.
        $.each(data, function (index, value) {
            arrItems.push(value);       // PUSH THE VALUES INSIDE THE ARRAY.
        });

        // EXTRACT VALUE FOR TABLE HEADER.
        var col = [];
        for (var i = 0; i < arrItems.length; i++) {
            for (var key in arrItems[i]) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }

        // CREATE DYNAMIC TABLE.
        var table = document.createElement("table");

        // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

        var tr = table.insertRow(-1);                   // TABLE ROW.

        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");      // TABLE HEADER.
            th.innerHTML = col[i];
            tr.appendChild(th);
        }

        // ADD JSON DATA TO THE TABLE AS ROWS.
        for (var i = 0; i < arrItems.length; i++) {

            tr = table.insertRow(-1);

            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = arrItems[i][col[j]];
            }
        }

        // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
        var divContainer = document.getElementById("showData");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
    });
});

Hi gusy, I am trying to convert the Array to an HTML Table using jQuery. However, the browser shows nothing from the JSON file. Please see my codes below.

Gary Fan
  • 73
  • 1
  • 8
  • 3
    Possible duplicate of [Convert json data to a html table](https://stackoverflow.com/questions/5180382/convert-json-data-to-a-html-table) – Rajesh Aug 08 '17 at 10:53
  • Thanks for the rely mate. However, my case is going to get data from a local json file instead of a js var. – Gary Fan Aug 08 '17 at 10:55
  • 1
    Once the data is loaded, it becomes same as a `var` variable. When you deal with asynchronous calls, issue comes when you do not know when to call your function, but in your case, since it properly used, i don't think you need to worry. Give it a try and if its not solving your issue, please mention why and what is the issue in it and I'll retract my vote. – Rajesh Aug 08 '17 at 10:57
  • It work well when I store the data as a JSON array written inside the script. So the problem could be $.getJSON() ? – Gary Fan Aug 08 '17 at 11:04
  • My friend, instead of this `var` variable, use `data` and process it inside success handler. – Rajesh Aug 08 '17 at 11:06
  • Dont get it mate. Can you please explain a bit further? sorry, I am new to js. – Gary Fan Aug 08 '17 at 11:10

0 Answers0