0

jQuery в ответ на запрос получает JSON-строку типа

{36:"Австралия",40:"Австрия"}

Фрагмент jQuery:

$.ajax ({
  type: "GET",
  url: "/ajax/",
  data: "q=" + query,
  cache: false,
  dataType: 'json',
  success: function(response) {

    // генерация bar на основе response

    $("#foo").html(bar);
  } 
});

Из полученного JSON хочется собрать фрагмент HTML:

<ul>
  <li id='36'>Австралия</li>
  <li id='40'>Австрия</li>
</ul>

И добавить внутрь div'а "foo".

Хочется не столько увидеть решение, сколько понять логику работы jQuery с JSON.

6
  • Кручусь вокруг этого: <...> success: function(response) { var bar = ''; $.each(response, function(key, val){ var bar += '<li id="' + key + '">' + val + '</li>'; }); $("#foo").html(bar); <...> Пока безуспешно. 23 мая 2012 в 3:17
  • Синтаксическая ошибка же var bar += ... // уберите var
    – user3545
    23 мая 2012 в 3:21
  • Убрал. Не взлетело. 23 мая 2012 в 5:26
  • Не стоит использовать аттрибут id для записи id в базе. Для этого лучше писать в data-id 23 мая 2012 в 6:50
  • 1
    поставьте firebug для лисы, в oper'е есть dragonfly, в хроме и ie жмите f12, для safari есть firebug lite правда глючный немного ) 23 мая 2012 в 14:57

5 ответов 5

2
success: function(response) {
var ul = $('<ul></ul>')
   for(i=0;i<response.length;i++){
   $('<li id='+response[i][0]+'>'+response[i][1]+'</li>').appendTo(ul);
}
  }

но так json данные не должны приходить, они должны выглядеть примерно так

{countryID:36, countryName:'Австралия'}
1
  • Вариант {countryID:36, countryName:'Австралия'} очень смущает по сравнению с {36:"Австралия",40:"Австрия"}. Во второй вмещается данных в 2-2.5 раза больше. Да и в плане семантическом у первого варианта выигрыша никакого - структура данных прозрачна: ключ-значение. 23 мая 2012 в 12:03
2

Начинать проверку надо с response. Проблема у вас с JSON'ом. Он не валидный. Воспользуйтесь валидатором. Дело в том, что для получения json объекта в $.ajax, jQuery использует функцию $.parseJSON(), которая выдает ошибку на ваш json:

Unhandled Error: JSON.parse: Property name (in double quotes) expected: 36:

Исправьте json, все будет работать.

NB:

Important: As of jQuery 1.4, if the JSON file contains a syntax error, the request will usually fail silently. Avoid frequent hand-editing of JSON data for this reason. JSON is a data-interchange format with syntax rules that are stricter than those of JavaScript's object literal notation. For example, all strings represented in JSON, whether they are properties or values, must be enclosed in double-quotes. For details on the JSON format, see http://json.org/.

2
  • Да. Учту эту тонкость с кавычками. С ними вообще интересно в jQuery, как я понял. 23 мая 2012 в 13:05
  • 1
    ну такую ошибку даст не только $.parseJSON но и JSON.parse из [json2.js][1] [1]:ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js 23 мая 2012 в 13:17
1

Я бы сделал так:

var $ul = $('<ul>');
for (var id in response) {
    var $li = $('<li>');
    $li.attr('id', id);
    $li.html(response[id]);
    $ul.append($li);
}
// ну и ещё можно
$('#foo').append($ul);
1
  • 2
    такой метод медленно работает, лучше строку собирать, и один раз делать $("#foo").html(ulstr) 23 мая 2012 в 13:15
0

Можно с извратом сделать примерно так :)

var data_mas = eval('('+response+')');
 var sum_elem=data_mas.length;
 var print,num=0;
  while (n < sum_elem) 
  {
   bar +='blablabla'+data_mas[0];
  n++;
  }
  $("#foo").html(bar);
4
  • > eval('('+response+')') Слышал ужастики как перехватывают ajax-запросы и присылают произвольный js-код? 23 мая 2012 в 6:47
  • Слышал, слышал, я же написал "извратом" :)
    – Artem
    23 мая 2012 в 7:01
  • 1
    зачем постить код плохого качества? 23 мая 2012 в 9:19
  • @Vladimir VG а кто мешает его не использовать. Я дал вариант решения. А про >зачем постить код плохого качества? Так же можно и в салон "ВАЗа" зайти, купить машину и через неделю она сломается, и что салону предъявишь "Зачем вы продаете машину плохого качества", что ответят? Правильно - "Если не устраивает - зачем купили?"
    – Artem
    23 мая 2012 в 9:55
0

Спасибо всем за варианты решения. Остановился на этом:

var items = '';
$.getJSON("/ajax/", "q=" + query, function(response) {
  $.each(response, function(i,val) {
    items += '<li id="' + i + '">' + val + '</li>';
  });
  $('#foo').html(items);
});

Проблема решилась изменением положения строк

var items = '';

и

$('#foo').html(items);

Проблема, как я понял, была в видимости переменной items для $('#foo').html(items). Выручил alert(), который я ставил всюду, где только можно, чтобы визуализировать данные на разных этапах. Еще один косяк - невалидный JSON: обернул ID кавычками.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.