JQuery JSON. Каждый ошибка - PullRequest
Новая
       32

JQuery JSON. Каждый ошибка

1 голос
/ 29 апреля 2010

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

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

Ответы [ 3 ]

3 голосов
/ 29 апреля 2010 
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 будет нулевым? Я изменил его, чтобы проверить его строку ...
  3. Чем быстрее вы строите строку элементов списка, затем добавляете ее в DOM в конце, чем добавляйте элементы в DOM по мере продвижения.
  4. Выполнение element.html(str) заменит текущее содержимое. Ваш образец заменял текущий html на каждую итерацию, поэтому в конце у вас будет только содержимое последнего элемента списка в вашем списке.
1 голос
/ 29 апреля 2010

Прежде всего, вместо 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);
});
0 голосов
/ 29 апреля 2010

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

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

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

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);
...