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>


JSONを取得し、配列を反復処理して、私が示したPHPと同じ結果を作成するための、jQueryまたはJavaScriptのコードはどのようになりますか？私は何時間も試していて、データをプルすることでさまざまな結果が得られますが、それを機能させることはできません。

ご協力いただきありがとうございます！

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 に答える