Breaking News: Grepper is joining You.com. Read the official announcement!

json data from server into html table

Inexpensive Ibex answered on May 21, 2021 Popularity 3/10 Helpfulness 1/10

answer json data from server into html table

related json data from server into html table

json data from server into html table

Comment

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

    <style>
        table 
        {
            width: 100%;
            font: 17px Calibri;
        }
        table, th, td 
        {
            border: solid 1px #DDD;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
        }
    </style>
</head>
<body>
    <p>Data extracted from a JSON and converted to an HTML table.</p>
    <div id="showData"></div>
</body>

<script>
    $(document).ready(function () {
        $.getJSON("../../library/sample.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);
        });
    });
</script>
</html>

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: www.encodedna.com

Tags: html-table javascript json server

Link to this answer
Share Copy Link

Contributed on May 21 2021

Inexpensive Ibex

0 Answers Avg Quality 2/10

Closely Related Answers

json data from server into html table

Comment

[
    {
        "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"
    }
]

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: www.encodedna.com

Tags: server html-table json javascript

Link to this answer
Share Copy Link

Contributed on May 21 2021

Inexpensive Ibex

0 Answers Avg Quality 2/10

json data from server into html table

Contents

More Related Answers

json data from server into html table

Closely Related Answers

json data from server into html table

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.