从JSON数据动态生成的HTML表

Question

I am trying to dynamically create an HTML table based on a JSON file coming from a database:

http://jsfiddle.net/xAt3Z/1/

var details = {
    "BookingsByHour" : [
        {
            "Date": "2014-06-5T00: 00: 00.000Z",
            "Breakdown": [
                {
                    "Hour": "00",
                    "BookingCount": 560,
                    "LastYearDifference": 42
                },{
                    "Hour": "01",
                    "BookingCount": 524,
                    "LastYearDifference": 34
                },{
                    "Hour": "02",
                    "BookingCount": 448,
                    "LastYearDifference": 92
                } // etc...
            ],
            "Total": 5340
        },{
            "Date": "2014-06-60T00: 00: 00.000Z",
            "Breakdown": [
                {
                    "Hour": "00",
                    "BookingCount": 506,
                    "LastYearDifference": 46
                },{
                    "Hour": "01",
                    "BookingCount": 432,
                    "LastYearDifference": 92
                },{
                    "Hour": "02",
                    "BookingCount": 498,
                    "LastYearDifference": 37
                }
            ],
            "Total": 14339
        },{
            "Date": "2014-07-60T00: 00: 00.000Z",
            "Breakdown": [
                {
                    "Hour": "00",
                    "BookingCount": 506,
                    "LastYearDifference": 46
                },{
                    "Hour": "01",
                    "BookingCount": 432,
                    "LastYearDifference": 92
                },{
                    "Hour": "02",
                    "BookingCount": 498,
                    "LastYearDifference": 37
                }
            ],
            "Total": 14339
        }, 
    ], 
};

The first row needs be composed by the 'Hour' (more clear once you see the json data), from 00 to 23, 24 hours basically

From the second row it will be the same for each date, there will be a 'BookingCount' corresponding to each 'Hour'.

This will be replicated based on how many 'Date' there are in the JSON data

So far I got this but I am stuck, I can't find a way to add the 'BookingCount corresponding to each 'Hour' for every 'Date'.

$(document).ready(function(){

    var hours = details.BookingsByHour[0].Breakdown.length-1;
        wrapper = $('.hours');

    for(i =0; i <= hours; i++ ){
        wrapper.append("<td>"+i+ "</td>");
    };

    for(i =0; i<=details.BookingsByHour.length-1; i++){

        $('.div').append("<tr><td>" + details.BookingsByHour[i].Date +"</td></tr>");
        console.log(details.BookingsByHour[i].Breakdown[i].BookingCount);
    }

}); 

Answer 1

First just add all 24 <td> to the table. Then, loop through the hours and do parseInt() on the value to get a valid integer. Use that integer to fetch the corresponding <td> and set its value

for(i =0; i < 24; i++ ){
    $('.hours').append("<td>"+i+ "</td>");
};

for(i =0; i<=details.BookingsByHour.length-1; i++){
    var row = $('<tr></tr>');
    row.append("<td>" +  details.BookingsByHour[i].Date +"</td>");
    for(var j=0;j<24;j++) {
        row.append('<td></td>');   
    }        

    for(var k = 0;k<details.BookingsByHour[i].Breakdown.length;k++){
        var hour = parseInt(details.BookingsByHour[i].Breakdown[k].Hour, 10);
        $(row.find('td')[hour+1]).text(details.BookingsByHour[i].Breakdown[k].BookingCount);
    }

    $('.div').append(row);
}

check out this working demo

The sample above also handles missing hours in your JSON. If you're not bothered with this, you can just add the value directly:

for (i = 0; i <= details.BookingsByHour.length - 1; i++) {
    var row = $('<tr></tr>');
    row.append("<td>" + details.BookingsByHour[i].Date + "</td>");
    for (var j = 0; j < 24; j++) {
        var val = typeof details.BookingsByHour[i].Breakdown[j] != 'undefined' ? details.BookingsByHour[i].Breakdown[j].BookingCount : '&nbsp;';
        row.append('<td>' + val + '</td>');
    }

    $('.div').append(row);
}

Answer 2

I would do it like this:

DEMO

js

var table = $("#booking");
    for(i =0; i<=details.BookingsByHour.length-1; i++){
        var _d = details.BookingsByHour[i].Breakdown;
        var tr = $("<tr></tr>");
        tr.append("<td>"+details.BookingsByHour[i].Date+"</td");
        for (var j = 0; j<24;j++) {
            var _b = (typeof _d[j] != "undefined") ? _d[j].BookingCount : "&nbsp";

            var td = $("<td>"+_b+"</td>");
            tr.append(td);
        }
        table.append(tr);
    }