1

このようなJSONオブジェクトがあります。

[
    {
        "id" : "23", 
        "event_id" : "0", 
        "sport_title" : null, 
        "event_title" : null, 
        "title" : "Under 1 day!", 
        "content" : "It\\'s all hotting up and battle commences in under one day!", 
        "link" : ""
    },

    {
        "id" : "20", 
        "event_id" : "0",
        "sport_title" : null, 
        "event_title" : null,
        "title" : "Getting Exciting", 
        "content" : "Less than two days till it all kicks off, with cricket....", 
        "link" : ""
    }
]

そして、私はこのJSONオブジェクトから詳細を取得し、それらを<ul>

私が現在試しているコードは次のようになり、問題が発生しています

var writeup_list = writeuplist;

$.getJSON('../json/getWriteups.json', function(data) {

    $.each(data.items, function(i, item) {
        writeup_list.html(function() {
            var output;
            output = '<li><a href="/writeups/index.php#writeup_' + item.id + '">';
            if(item.sport_title != null) {
                output += item.sport_title + ' - ';
            }
            output += item.title + '</a></li>';

            return output;
        });
    });

});

writeuplistは単なるulオブジェクトです。

また、すでにリストにある情報を上書きしたり、再度追加したりすることも心配です。同じデータを追加し続けたくない。これを回避するための良い方法は何ですか？

JSONファイルからデータを取得する際に問題が発生しているようです。これは、.each関数でデータにアクセスしようとしている方法と関係があると思います。

誰かがどこが間違っているのかを見つけることができますか？

4

3 に答える 3

3 
jQuery.getJSON('../json/getWriteups.json', function(data) {
    var output = '';

    jQuery.each(data.items, function (index, item) {
      output += '<li><a href="/writeups/index.php#writeup_' + item.id + '">';

      if (typeof item.sport_title == "string") {
        output += item.sport_title + ' - ';
      }

      output += item.title + '</a></li>';
    });

    writeup_list.html(output);
});

注意すべき点：

  1. data.itemsが配列にアクセスする正しい方法であると確信していますか？（alert(data.items)コールバックで実行してみて、[object Array]が表示されていることを確認してください）。
  2. 本当にitem.sport_titleヌルになりますか？文字列をチェックするように変更しました...
  3. リスト要素の文字列を作成し、最後にDOMに追加する方が、要素をDOMに追加するよりも迅速です。
  4. これを行うelement.html(str)と、現在のコンテンツが置き換えられます。サンプルは現在のhtmlを反復ごとに置き換えていたため、最後には、リストの最後のリスト要素のコンテンツのみが含まれます。
于 2010-04-28T23:34:20.240 に答える
1

まず、の代わりにdata.items、を使用する必要がありますdata。あなたの場合、返されるデータは配列であるため、それを反復処理する必要があります。

次に、コードの記述方法では、の内容が上書きされ続けますwriteup_list。代わりに、html文字列を作成し、最後に設定します。

$.getJSON('../json/getWriteups.json', function(data) {
    var output = '';    
    $.each(data, function(i, item) {
        output += '<li><a href="/writeups/index.php#writeup_' + item.id + '">';
        if(item.sport_title != null) {
            output += item.sport_title + ' - ';
        }
        output += item.title + '</a></li>';
    });

    writeup_list.html(output);
});
于 2010-04-28T23:39:17.010 に答える
0

私はあなたが使うべきだと信じています：

$(data.items).each(function(i, item) {

ただし、同じことを行う標準のjavascriptループを使用することもできます。

for (var i = 0; i < data.items.length; i++) {
    var item = data.items[i];

.html()また、すでに配置されているhtmlを上書きするため、lisの設定には使用しないでください。.append()代わりに使用してください：

var output;
output = '<li><a href="/writeups/index.php#writeup_' + item.id + '">';
if(item.sport_title != null) {
    output += item.sport_title + ' - ';
}
output += item.title + '</a></li>';

writeup_list.append(output);
于 2010-04-28T23:28:15.177 に答える