使用JSON或jQuery在Javascript中创建HTML表

我对JavaScript并不擅长（但是！） – 我真的需要一些帮助才能克服这个让我很多过早脱发的问题！

我似乎无法弄清楚如何使用JSON数据构建以下HTML代码。

这是我正在为我正在处理的此页面的新版本生成的JSON数据示例：

[{"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":""}] 

为了说明我需要的HTML结果，这里是我目前如何在没有JSON的情况下（严格地在PHP中）：

 
 
 '.$unit_name.'
 
 '.$inclean_datetime.'
 
 '.$checkin.'
 
 '.$checkout.'
 
 '.$inclean_cleaner.'
 
 '.$inclean_notes.'
  

在jQuery或JavaScript中，代码看起来像什么才能获取JSON，迭代数组并创建与我展示的PHP相同的结果？ 我已经尝试了几个小时，并获得了不同的数据结果 – 但我无法让它工作。

谢谢你的帮助！

Answer 1

这是您完整的解决方案：

 $.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 = '
' + '
 ' + col.name + '
' + '
 ' + col.inclean_datetime + '
' + '
 ' + col.checkin + '
' + '
 ' + col.checkout + '
' + '
 ' + col.inclean_cleaner + '
' + '
 ' + col.inclean_notes + '
' + '
'; $('body').append($(html)); }); }); }); 

Answer 2

jQuery模板可以在这里提供帮助。

http://api.jquery.com/jquery.tmpl/显示了从类似JSON的数据包中填充的模板的几个示例， {{each}}元素允许您迭代列表以填充行和单元格。

模板：

 
 Title: ${Name}. {{each Languages}} ${$index + 1}: ${$value}.  {{/each}}  

数据：

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

Answer 3

每个人似乎都在假设AJAX调用。 这并不复杂，这是一个例子，

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

您可以直接从jQuery文档http://api.jquery.com/jQuery.get/了解有关它的更多信息。

如果您需要post请求，请参阅jQuery docs for post，或者更常见的文章，参考AJAX调用的jQuery文档： http ： //api.jquery.com/jQuery.ajax/ 。

Answer 4

 var table = ''; $.each(json_data, function(index, obj) { table += '
'; for(var x in obj) { table += '
 '+ obj[x]+'
'; } table += '
'; });