Create HTML table in Javascript using JSON or jQuery

Question

I'm not very good at JavaScript (yet!) - I really need help to get past this stuck point that causes me a lot of premature hair loss!

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

This is the sample JSON data that I created 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 do it now 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 capture JSON, iterate through arrays and produce the same result as PHP I showed? I have worked for several hours and get different data processing results, but I just can't get it to work.

Thank you for your help!

Answer 1

Here is the 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)); }); }); }); 

Answer 2

jQuery templates can help here.

http://api.jquery.com/jquery.tmpl/ shows several examples of populating a template from a JSON-like dataset, and {{each}} 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"] } ]; 

Answer 3

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

Answer 4

Everyone seems to be taking knowledge of AJAX calls. It’s not difficult, 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 this directly from jQuery docs, http://api.jquery.com/jQuery.get/

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