Parsing JSON objects for HTML table Parsing JSON objects for HTML table arrays arrays

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);        }    });});

JSFiddle


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('')));});