Populate html table from a jsondata.json file using javascript

Question

I am new to javascript and jQuery. I have loaded a JsonData.json file. I need help to loop through all the data and display it in a HTML table when the user clicks a button.

<script>
    var a = {};
    $.getJSON('JsonData.json', function (data) {
        a = data;
    });
</script>

My table structure is below:

<table>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>IDNumber</th>
    </tr>
</table>

My "JsonData.json" file structure is below:

[
    {
        "ID": 1,
        "Name": "John Smith",
        "IDNumber": "7606015012088"
    },
    {
        "ID": 2,
        "Name": "Molly Malone",
        "IDNumber": "8606125033087"
    },
    {
        "ID": 3,
        "Name": "Rianna Chetty",
        "IDNumber": "6207145122087"
    },
    {
        "ID": 4,
        "Name": "Gregory Nazul",
        "IDNumber": "8112125042088"
    },
    {
        "ID": 5,
        "Name": "Mary Billat",
        "IDNumber": "9103317012087"
    },
    {
        "ID": 6,
        "Name": "Harry Popadopalous",
        "IDNumber": "7206085031088"
    },
    {
        "ID": 7,
        "Name": "Jim Beam",
        "IDNumber": "5101236012088"
    }
]

What does the contents of the `jsonData.json` file look like? — Anthony Grist, Oct 25 '13 at 11:06
Please research for yourself before asking a duplicate question. — Chris Pickford, Oct 25 '13 at 11:09

score 1 · Answer 1 · answered Oct 25 '13 at 11:12

You can use something like:

     <script>
            var a = {};
            $.getJSON('JsonData.json', function (data) {
                a = data;

    $.each(a, function(idx, elem){
    $('table#tbl TBODY').append('<tr><td>'+elem.ID+'</td><td>'+elem.Name +'</td><td>'+elem.IDNumber +'</td></tr>');
    });
                });

         </script>

<table id="tbl">
<thead><tr><th>ID</th><th>Name</th><th>IDNumber</th></tr></thead>
<tbody></tbody>
</table>

Populate html table from a jsondata.json file using javascript

1 Answers1