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

Question

我不擅长 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 中)的做法:

<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>

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