jquery - Filling a Big Table Rows from JSON Data

Question

I am trying to fill up a table using JSON data

Here's what I am thinking

$.ajax({
  dataType: "json",
  url: "music.json"
})
.done(function(gamesjson){
    DATA = gamesjson;
    buildTable(DATA ); // this one is calling the above code
  })
.fail(function(){
    console.log("music.json error");
  })
;

function buildTable(DATA){
var gl = $("#gl");
$.each(DATA.music, function(index, value) {
// code to populate table
??

}

$("#gl").append(gl);
}

What do I write in buildTable()? Also if my json contains 1000 rows, what's the best way to build table?

Please give an example and explanation. Thanks

http://jsfiddle.net/9u4zR/1/

Answer 1

Something like this:

function buildTable(DATA){
    var table = "<table>";
    $.each(DATA.music, function(index, value) {
        table += "<tr><td>" + value.col1 + "</td><td>" + value.col2 + "</td></tr>";
    }
    table += "</table>";
    $("#gl").append(table);    
}

Of course, you need to replace col1 and col2 with the names of your actual properties, and add more columns as needed. You'll also probably want to specify classes or styles. But this shows you the general structure, you can refine it as needed for your application.