Вывод возвращаемого JSON массива

Question

Вывод возвращаемого JSON массива

14 авг. 2012 г., 17:53:11

Просмотры: 25.5K

Голосов: 0

У меня есть следующий JSON массив:

[{"occurences":"1","post_title":"Test 1","ID":"16"},    
 {"occurences":"1","post_title":"Test 2","ID":"19"},
 {"occurences":"1","post_title":"\u543b\u60a8\u7684\u5c41\u80a1","ID":"21"}]

И я использую этот JavaScript для его парсинга и вывода:

success:function(data){
     $.each(data, function(i, post){
     content = '';
     content += '<li>' + post.post_title + '</li>';
   });

   $(content).appendTo("#search-results");

   }

Но на экране отображается только "Undefined", и в Консоли нет ошибок.

Если вам интересно, вот HTML часть:

<form id="search" action="">
<div class="toolbar">
    <h1>Поиск</h1>
    <a href="#" class="back">Назад</a>
</div>
<ul class="rounded">
    <li><input type="text" name="search-text" placeholder="Поиск" id="search-text" /></li>
</ul>
<ul class="edgetoedge" id="search-results">
    <li class="sep">Результаты</li>                
</ul>
</form>

Есть идеи почему? Заранее большое спасибо!

Josef Young

1

array json разбор

Все ответы на вопрос

Установка правильного dataType для запроса — это важная деталь, не учтенная в ответе выше (это заставляет jQuery отправлять HTTP-заголовок Accept с запросом — и он также ожидает данные JSON в коллбэке success):

dataType: 'json',
success:function(json){
   var content = '';
   jQuery.each(json, function(i, v){
      content += '<li>' + v.post_title + '</li>';
   });
   /* так результаты не будут накапливаться */
   jQuery("#search-results").html(content);
}

Также не было учтено отправка правильного HTTP-заголовка с ответом:

header("content-type: application/json; charset=utf8");

Internet Explorer не любит этот заголовок — но это уже другая история (подробнее).

Martin Zeitler

183

18 авг. 2012 г. 01:07:43

Комментарии

@syslogic, спасибо, что нашли время. Я вставил выше полный фрагмент Ajax, который использовал все это время. Хотя вы, вероятно, правы насчет того, что "parseJSON" бесполезен, у меня возникали ошибки null, когда он отсутствовал. Я все еще размышляю над этой проблемой.

Josef Young

18 авг. 2012 г. 13:37:24

Загадка решена. Я тестировал и тестировал. Вот что обнаружил: абсолютно нет необходимости в парсинге данных, передаваемых через Ajax, за исключением случаев, когда есть конфликт между версиями jQuery на стороне клиента и на стороне сервера!

Josef Young

19 авг. 2012 г. 20:00:58

Добавьте var json = jQuery.parseJSON(data);
Объявите переменную content, добавив var content
Поместите content = ''; перед циклом each

Вот так:

function (data) {
    var content = '';
    var json = jQuery.parseJSON(data);

    $.each(json, function(i, post) {
        content += '<li>' + post.post_title + '</li>';
    });

    $(content).appendTo("#search-results");
}

Jasper Denkers

309

14 авг. 2012 г. 18:25:08

Комментарии

Спасибо. Попробовал ваши предложения, но проблема сохранилась.

Josef Young

14 авг. 2012 г. 18:32:37

Хотя пункт #2 должен был быть правильным.

Josef Young

14 авг. 2012 г. 18:33:25

Извините, попробовал снова и всё заработало.

Josef Young

14 авг. 2012 г. 18:41:14

Вы были правы, просто мой FTP-сервер был недоступен. Извините и спасибо!!!

Josef Young

14 авг. 2012 г. 18:42:00

Эм... jQuery.parseJSON(data) довольно бесполезен - потому что переменная "data" уже должна быть JS-объектом в колбэке функции jQuery.ajax... это применимо только если это JSON-строка. Я скорее предполагаю, что вы отправляете JSON без HTTP-заголовков или с неправильными.

Martin Zeitler

18 авг. 2012 г. 00:50:23

Показать остальные 1 комментариев

Josef Young 1 · Accepted Answer · 2012-08-18T05:59:26Z

$.ajax({

                  url: 'http://mypath/wp-admin/admin-ajax.php',

                  data:{
                       'action':'go_ajax',
                       'fn':'spw_autosuggest',  
                       'queryString': $.trim(inputString.val())
                       },  

                  dataType: 'JSON',

                  success:function(data){
                            // этот блок обрабатывает JSON данные

                            //console.log(data);

                            var content = '';
                            var data = $.parseJSON(data);

                            $.each(data, function(i, post) {
                                content += '<li>' + post.post_title + '</li>';
                            });

                            $(content).appendTo("#search-results");
                    },

                    error: function(errorThrown){
                       alert('Ошибка');
                       console.log(errorThrown);
                    }

        });