JQuery function to create a table using JSON data

Question

How do you extract a JSON object from a local file and display it in a table using jQuery? Here is the contents of the JSON file ( jsondata.json ):

 { "scores" : [ ["3/1/2011", 610],["4/1/2011", 610],["5/1/2011", 610],["6/1/2011", 610], ["7/1/2011", 720], ["8/1/2011", 500], ["9/1/2011", 500] ] } 

Answer 1

Example - demo http://jsfiddle.net/kVdZG/

You can repeat and add items.

 <table id='scores' border="1"></table> 

JS -

 var data = { "scores" : [ ["3/1/2011", 610],["4/1/2011", 610],["5/1/2011", 610],["6/1/2011", 610], ["7/1/2011", 720], ["8/1/2011", 500], ["9/1/2011", 500] ] } $(data.scores).each(function(index, element){ $('#scores').append('<tr><td> '+element[0]+' </td> <td> '+element[1]+' </td></tr>'); }) 

Answer 2

jQuery provides no function for formatting JSON as an HTML table. jQuery provides only the functions needed to iterate through a JSON object and control the DOM. However, there are jQuery plugins that can do this.

https://github.com/gajus/json-to-table

Answer 3

 var json = { "scores" : [ ["3/1/2011", 610],["4/1/2011", 610],["5/1/2011", 610],["6/1/2011", 610], ["7/1/2011", 720], ["8/1/2011", 500], ["9/1/2011", 500] ] } $.each(json.scores,function(key,value){ alert(key + " "+value) }) 

u can check here http://jsfiddle.net/atMa7/