jQuery function to create table using JSON data

Question

How do you retrieve a JSON object from a local file and display it in a table using jQuery? Here is the content of 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 iterate and append the elements.

<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 does not provide any function to format JSON as a HTML table. jQuery provides only the functionality required to itterate the JSON object and manipulate the DOM. However, there are jQuery plugins that can do that.

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