HTML table dynamically generated from JSON data

Question

enter image description here 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);
    }

});

will the hours row always include 24 hours from 00 to 23? (in that case i don't think it needs to render through code) — webkit
– webkit, Commented Jun 23, 2014 at 12:57

Reinder Wit · Accepted Answer · 2014-06-23 13:47:20Z

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

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 23, 2014 at 13:26

webkit

3,3691 gold badge19 silver badges19 bronze badges

Collectives™ on Stack Overflow

HTML table dynamically generated from JSON data

2 Answers 2

Comments

js

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

js

Comments

Your Answer

Sign up or log in

Post as a guest

Related