javascript - Populating a table with an object with JQuery -
i have array of objects object [{date, count, city}]
lets have data
[{01/01/01, 10, new york}, {01/01/01, 15, london}, {01/01/01, 16, rome},{02/01/01, 40, new york},{02/01/01, 25, london}, {02/01/01, 36, rome}]
i want populate html table using jquery , have following result
date | new york | london | rome 01/01/01 | 10 | 15 | 16 02/01/01 | 40 | 25 | 36
is possible generate table similar jquery?
this code have done far
for (var = 0; < countresult.length; i++) { var html = "<table><thead><tr><th>date</th><th>city</th><th>count</th></thead><tbody>"; (var j = 0; j < countresult[i].length; j++) { html += "<tr>"; html += "<td>" + countresult[i][j].date + "</td><td>" + countresult[i][j].city + "</td><td>" + countresult[i][j].count+ "</td>"; } html += "</tr>"; html += "</tbody></table></br>"; $(html).appendto("#div"); }
the solution question was:
var countresult = [ ["01/01/01", 10, "new york"], ["01/01/01", 15, "london"], ["01/01/01", 16, "rome"], ["02/01/01", 40, "new york"], ["02/01/01", 25, "london"], ["02/01/01", 36, "rome"] ] var cities = [] $.each(countresult, function(rownum, row) { var city = row[2]; if($.inarray(city, cities) < 0) cities.push(city); }); var html = "<table><thead><tr><th>date</th>" + $.map(cities, function (c) { return "<th>" + c }).join("") + "</tr></thead><tbody>"; var summary = {}; $.each(countresult, function (rownum, row) { if(!summary[row[0]]) summary[row[0]] = {} summary[row[0]][row[2]] = row[1]; }); $.each(summary, function (date, counts) { html += "<tr><td>" + date; $.each(counts, function (i, ct) { html += "<td>" + ct ; }); html += "</tr>"; }); $(html).appendto("#div");
Comments
Post a Comment