Create HTML table in Javascript with JSON or jQuery

Question

I'm not any good at JavaScript (yet!) - I really need some help to get past this stuck point that is causing me lots of premature hair loss!

I just can't seem to figure out how to build the following HTML code using JSON data.

This is a sample of the JSON data that I have being generated for the new version of this page I'm working on:

[{"id":"1732","name":"1BR House","checkin":"2012-12-20","checkout":"2012-12-23","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1587","name":1BR House","checkin":"2012-12-23","checkout":"2013-01-01","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1661","name":"2BR Studio","checkin":"2012-12-25","checkout":"2013-01-02","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1829","name":"Studio Cottage","checkin":"2012-12-25","checkout":"2012-12-29","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1787","name":"Studio Cottage","checkin":"2012-12-29","checkout":"2013-01-08","inclean_cleaner":"","inclean_datetime":"2012-12-29 00:00:00","inclean_notes":""},{"id":"1843","name":"1BR House","checkin":"2013-01-07","checkout":"2013-01-19","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1970","name":"Studio Cottage","checkin":"2013-01-12","checkout":"2013-01-19","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1942","name":"Suite","checkin":"2013-01-15","checkout":"2013-01-20","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""}]

To illustrate the HTML result I need, here is how I currently do it without JSON (strictly in PHP):

<div class="'.$dashboard_list_line_class.'">
<div class="dashboard_list_unitname">&nbsp;<a href="add-edit.php?bookingID='.$booking_id.'">'.$unit_name.'</a></div>
<div class="dashboard_list_cleaner_datetime">&nbsp;<a href="add-edit.php?bookingID='.$booking_id.'">'.$inclean_datetime.'</a></div>
<div class="dashboard_list_cleaner_checkin">&nbsp;<a href="add-edit.php?bookingID='.$booking_id.'">'.$checkin.'</a></div>
<div class="dashboard_list_cleaner_checkout">&nbsp;<a href="add-edit.php?bookingID='.$booking_id.'">'.$checkout.'</a></div>
<div class="dashboard_list_cleaner_inclean_cleaner">&nbsp;<a href="add-edit.php?bookingID='.$booking_id.'">'.$inclean_cleaner.'</a></div>
<div class="dashboard_list_cleaner_notes">&nbsp;<a href="add-edit.php?bookingID='.$booking_id.'">'.$inclean_notes.'</a></div>
</div>

What would the code look like in jQuery or JavaScript to grab the JSON, iterate though the arrays and create the same result as the PHP I have shown? I've been trying for hours, and get different results of puling data - but I just can't make it work.

Thanks for your help!

You can use jQuery for that .each function will help you to iterate through loop and putting variables in div. — Kashif Naseem
– Kashif Naseem, Commented Dec 19, 2012 at 7:02
By using ajax you will be able to fetch the json data and in success function you will write your code. — Kashif Naseem
– Kashif Naseem, Commented Dec 19, 2012 at 7:04

Kashif Naseem · Accepted Answer · 2012-12-19 09:20:19Z

Here is you complete solution:

$.ajax( "example.php" ).done(function (response) {
    //var data = [{"id":"1732","name":"1BR House","checkin":"2012-12-20","checkout":"2012-12-23","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1587","name":"1BR House","checkin":"2012-12-23","checkout":"2013-01-01","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1661","name":"2BR Studio","checkin":"2012-12-25","checkout":"2013-01-02","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1829","name":"Studio Cottage","checkin":"2012-12-25","checkout":"2012-12-29","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1787","name":"Studio Cottage","checkin":"2012-12-29","checkout":"2013-01-08","inclean_cleaner":"","inclean_datetime":"2012-12-29 00:00:00","inclean_notes":""},{"id":"1843","name":"1BR House","checkin":"2013-01-07","checkout":"2013-01-19","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1970","name":"Studio Cottage","checkin":"2013-01-12","checkout":"2013-01-19","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""},{"id":"1942","name":"Suite","checkin":"2013-01-15","checkout":"2013-01-20","inclean_cleaner":"","inclean_datetime":"0000-00-00 00:00:00","inclean_notes":""}];
    var data = $.parseJSON(response);
    var dashboard_list_unitname = 'change_this';
    var booking_id = 'also_change_this';

    $(data).each(function (i, row) {
            $(row).each(function (j, col) {
                    var html = '<div class="row_' + i + '">' +
                            '<div class="' + dashboard_list_unitname + '">&nbsp;<a href="add-edit.php?bookingID=' + booking_id + '">' + col.name + '</a></div>' +
                            '<div class="dashboard_list_cleaner_datetime">&nbsp;<a href="add-edit.php?bookingID=' + booking_id + '">' + col.inclean_datetime + '</a></div>' +
                            '<div class="dashboard_list_cleaner_checkin">&nbsp;<a href="add-edit.php?bookingID=' + booking_id + '">' + col.checkin + '</a></div>' +
                            '<div class="dashboard_list_cleaner_checkout">&nbsp;<a href="add-edit.php?bookingID=' + booking_id + '">' + col.checkout + '</a></div>' +
                            '<div class="dashboard_list_cleaner_inclean_cleaner">&nbsp;<a href="add-edit.php?bookingID=' + booking_id + '">' + col.inclean_cleaner + '</a></div>' +
                            '<div class="dashboard_list_cleaner_notes">&nbsp;<a href="add-edit.php?bookingID=' + booking_id + '">' + col.inclean_notes + '</a></div>' +
                            '</div>';
                    $('body').append($(html));
            });
    });
});

Thank you Kashif for taking the time to write such a thorough answer. All the other answers I had come upon in my hours of hacking away at this and Googling, but I just couldn't go from the abstract to concrete successfully.Your functional code is exactly what I needed, and now I can use this to understand how to make this work across all the other code I need to write.

Mike Samuel · Accepted Answer · 2012-12-19 07:04:35Z

1

jQuery templates can help here.

http://api.jquery.com/jquery.tmpl/ shows several examples of a template being populated from a JSON-like data bundle, and the {{each}} element allows you to iterate over lists to populate rows and cells.

Template:

<li>
    Title: ${Name}.
    {{each Languages}}
        ${$index + 1}: <em>${$value}. </em>
    {{/each}}
</li>

Data:

var movies = [
    { Name: "Meet Joe Black", Languages: ["French"] },
    { Name: "The Mighty", Languages: [] },
    { Name: "City Hunter", Languages: ["Mandarin", "Cantonese"] }
];

answered Dec 19, 2012 at 7:04

Mike Samuel

121k30 gold badges230 silver badges255 bronze badges

Comments

gideonite · Accepted Answer · 2012-12-19 07:12:10Z

0

Everyone seems to be assuming knowledge of AJAX calls. It's not complicated, here is an example,

$.get('json/url', function(json_data) {

// do stuff with your data
// like, other people suggested json_data.each(function(item) {
// do stuff
// });

});

You can learn more about it straight from the jQuery docs, http://api.jquery.com/jQuery.get/

If you need to make a post request just consult the jQuery docs for post, or for the more general article, the jQuery docs for AJAX calls: http://api.jquery.com/jQuery.ajax/.

answered Dec 19, 2012 at 7:12

gideonite

1,2211 gold badge8 silver badges14 bronze badges

Comments

thecodeparadox · Accepted Answer · 2012-12-19 07:25:46Z

0

var table = '';
$.each(json_data, function(index, obj) {
   table += '<div>';
   for(var x in obj) {
      table += '<div class="dashboard_list_unitname">&nbsp;<a href="add-edit.php?bookingID="'+ obj.id +'">'+ obj[x]+'</a></div>';
   }
   table += '</div>';
});

edited Dec 19, 2012 at 7:25

answered Dec 19, 2012 at 7:00

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

1 Comment

Mike Samuel Over a year ago

This contains two XSS vulnerabilities and pollutes the global namespace with prop.

Collectives™ on Stack Overflow

Create HTML table in Javascript with JSON or jQuery

4 Answers 4

1 Comment

Template:

Data:

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Template:

Data:

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related