Parsing JSON objects for HTML table
Loop over each object, appending a table row with the relevant data each iteration.
$(document).ready(function () { $.getJSON(url, function (json) { var tr; for (var i = 0; i < json.length; i++) { tr = $('<tr/>'); tr.append("<td>" + json[i].User_Name + "</td>"); tr.append("<td>" + json[i].score + "</td>"); tr.append("<td>" + json[i].team + "</td>"); $('table').append(tr); } });});
You can use simple jQuery jPut plugin
http://plugins.jquery.com/jput/
<script>$(document).ready(function(){var json = [{"name": "name1","score":"30"},{"name": "name2","score":"50"}];//while running this code the template will be appended in your div with json data$("#tbody").jPut({ jsonData:json, //ajax_url:"youfile.json", if you want to call from a json file name:"tbody_template",});});</script> <div jput="tbody_template"> <tr> <td>{{name}}</td> <td>{{score}}</td> </tr></div><table> <tbody id="tbody"> </tbody></table>
Loop over each object, push in string array and join them. Append in target table, it is better.
$(document).ready(function () {$.getJSON(url,function (json) { var tr=[]; for (var i = 0; i < json.length; i++) { tr.push('<tr>'); tr.push("<td>" + json[i].User_Name + "</td>"); tr.push("<td>" + json[i].score + "</td>"); tr.push("<td>" + json[i].team + "</td>"); tr.push('</tr>'); } $('table').append($(tr.join('')));});