How to read json data and populate html table on button click

Question

0.00/5 (No votes)

See more:

I need to read the JsonData.json file below and populate my html table in javascript on the click of a button:

 [   {
        "ID": 1,
        "Name": "John Smith",
        "IDNumber": "7606015012088"
    },
    {
        "ID": 2,
        "Name": "Molly Malone",
        "IDNumber": "8606125033087"
    },
]

Please help as I am very new to javascript.
My html table has headers id, name, idnumber

Posted 24-Oct-13 21:56pm

Linkz_G

Updated 10-Sep-16 0:02am

walterhevedeich

v3

Add a Solution

3 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Madhu Nair · Answer 1 · 2013-10-24T22:29:00

Solution 1

This Link provides exactly what you needed

Posted 24-Oct-13 22:29pm

Madhu Nair

**AmitGajjar** · Answer 2 · 2013-10-24T22:35:00

Solution 2

Hi,

Have you search for javascript/jQuery plugin ? check jQuery plugin to convert JSON data into Table.[^]

Best luck
-Amit

Posted 24-Oct-13 22:35pm

AmitGajjar

Anthony Agbator · Answer 3 · 2016-09-10T00:02:00

Solution 3

Try this
$.getJSON("JsonData.json", function(result){
$.each(result, function(i, field){
$("table").append("

"+field+"

");
});
});

Posted 10-Sep-16 0:02am

Anthony Agbator

Updated 10-Sep-16 0:03am

How to read json data and populate html table on button click

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0

How to read json data and populate html table on button click

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us