jQuery JSON .each error

Question

У меня есть объект 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.

Может ли кто-нибудь определить, где происходит неправильное?

Answer 1

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) в обратном вызове и убедитесь, что вы видите [массив объектов]).
2. Вы уверены, что item.sport_title будет null? Я изменил его, чтобы проверить его строку ...
3. Быстрое создание строки элементов списка по мере продвижения, а затем добавление ее в DOM в конце, чем добавление элементов в DOM как ты иди.
4. Выполнение element.html(str) заменит текущее содержимое. Ваш образец заменял текущий html каждой итерацией, поэтому в конце вы должны были иметь только содержимое последнего элемента списка в вашем списке.

Answer 2

Я считаю, вы должны использовать:

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

Но вы также можете использовать стандартный Java-цикл, который делает то же самое:

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

Кроме того, вы не хотите использовать .html() в установите ваш lis, так как он перезапишет html уже на месте. Используйте .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); 

Answer 3

Прежде всего, вместо 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); 
});