1

我不擅长 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 相同的结果的代码会是什么样子？我已经尝试了几个小时，并获得了不同的数据提取结果 - 但我就是无法让它工作。

谢谢你的帮助！

4

4 回答 4

2

这是您的完整解决方案：

$.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));
            });
    });
});
于 2012-12-19T09:20:19.420 回答
1

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

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

模板：

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

数据：

var movies = [
    { Name: "Meet Joe Black", Languages: ["French"] },
    { Name: "The Mighty", Languages: [] },
    { Name: "City Hunter", Languages: ["Mandarin", "Cantonese"] }
];
于 2012-12-19T07:04:35.360 回答
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>';
});
于 2012-12-19T07:00:37.930 回答
0

每个人似乎都在假设 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 文档以获取帖子，或者对于更一般的文章，用于 AJAX 的 jQuery 文档调用：http ://api.jquery.com/jQuery.ajax/ 。

于 2012-12-19T07:12:10.827 回答