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

我不擅长JavaScript（现在！）-我真的需要一些帮助来克服这个导致我过早脱发的问题

我似乎不知道如何使用JSON数据构建下面的HTML代码

这是一个JSON数据的示例，我正在为新版本的页面生成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）的情况下的做法：

在jQuery或JavaScript中，获取JSON、迭代数组并创建与我所展示的PHP相同的结果的代码是什么样子的？我已经尝试了几个小时，得到了不同的数据脉冲结果-但我就是不能让它工作

谢谢你的帮助

var表=”；
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>';
});

$.each（json_数据，函数（索引，obj）{
表+=''；
用于（obj中的var x）{
表+=''；
}
表+=''；
});

可以在这里提供帮助

显示了从类似JSON的数据包填充模板的几个示例，该元素允许您在列表上迭代以填充行和单元格

模板：

---

每个人似乎都假定自己了解AJAX调用。这并不复杂，这里有一个例子

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

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

});

您可以直接从jQuery文档了解更多信息，

---

如果您需要发出

post

请求，只需查阅jQuery文档中的post，或者更一般的文章，jQuery文档中的AJAX调用：。

以下是完整的解决方案：

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

$.ajax（“example.php”）.done（函数（响应）{
//var数据=[{“id”：“1732”，“名称”：“1BR House”，“签入”：“2012-12-20”，“签出”：“2012-12-23”，“inclean_cleaner”：“inclean_datetime”：“0000-00-00:00:00”，“inclean_notes”：“}”，“id”：“1587”，“名称”：“1BR House”，“签入”：“2012-12-23”，“签出”：“2013-01-01”，“inclean_cleaner”：“，“inclean_datetime”：“0000-00-00:00”，“inclean_notes”：“，”1661“，”，“姓名”：“2BR工作室”、“签到”：“2012-12-25”、“签到”：“2013-01-02”、“inclean_清洁工”：“inclean_日期时间”：“0000-00-00 00:00:00”、“inclean_备注”：“}，{”id:“1829”、“姓名”：“工作室小屋”、“签到”：“2012-12-25”、“签到”：“2012-12-29”、“inclean_清洁工”：“inclean_日期时间”：“0000-00-00:00:00:00”、“inclean_备注”：“}，{”id:“1787”、“姓名”：”工作室小屋，入住：2012-12-29，结帐：2013-01-08，包括清洁：包括清洁：2012-12-29 00:00:00，包括清洁：1843，姓名：1BR房屋，入住：2013-01-07，结帐：2013-01-19，包括清洁：2013-01-19，包括清洁：0000-00-00:00:00，包括清洁：1970，姓名：工作室小屋签入“：”2013-01-12“，”签出“：”2013-01-19“，”包括清洁工“，”包括清洁工“，”0000-00-00 00:00:00:00“，”包括清洁工“，”}，{”id“：”1942“，”姓名“，”套房“，”签入“：”2013-01-15“，”签出“，”2013-01-20“，”包括清洁工“，”包括清洁工“，”包括清洁工“，”包括清洁工日期时间“，”0000-00-00:00:00:00“，”包括清洁工单“，”；
var data=$.parseJSON（响应）；
var dashboard_list_unitname='更改_this'；
var booking_id='也改变这个'；
$（数据）。每个（函数（i，行）{
$（行）。每个（函数（j，col）{
var html=''+
' ' +
' ' +
' ' +
' ' +
' ' +
' ' +
'';
$（'body'）。追加（$（html））；
});
});
});

您可以使用jQuery。每个函数都将帮助您迭代循环并将变量放入div。通过使用ajax，您将能够获取json数据，并在success函数中编写代码。这包含两个XSS漏洞，并通过

prop

污染全局命名空间。感谢Kashif接受ti我希望我能写出这样一个彻底的答案。我花了几个小时的时间在这个问题上和谷歌上找到了所有其他答案，但我就是不能成功地从抽象到具体。你的函数代码正是我所需要的，现在我可以用它来理解如何在我需要编写的所有其他代码中实现这一点。

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

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

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

});

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