从JSON数据动态生成的HTML表

Question

我试图根据来自数据库的JSON文件动态创建HTML表：

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
        }, 
    ], 
};

第一行需要由＆＃39; Hour＆＃39; （一旦你看到json数据就更清楚了），从00到23，基本上是24小时

从第二行开始，每个日期都是相同的，会有一个＆＃39; BookingCount＆＃39;对应于每个小时＆＃39;

这将基于多少＆＃39; Date＆＃39;来复制。有JSON数据

到目前为止，我得到了这个但是我被卡住了，我无法找到一种方法来添加与每个小时相对应的＆＃39; BookingCount。每个＆＃39;日期＆＃39;。

$(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

首先将所有24 <td>添加到表中。 然后，遍历小时并对值执行parseInt()以获取有效整数。 使用该整数来获取相应的<td>并设置其值

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

查看此working demo

上面的示例还处理了JSON中缺少的小时数。 如果您对此不感兴趣，可以直接添加该值：

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

我会这样做：

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