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] ]
}
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>');
})
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.
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 from here http://jsfiddle.net/atMa7/
