$ .each не перебирает все объекты, поступающие в ответе ajax - PullRequest
Новая
       21

$ .each не перебирает все объекты, поступающие в ответе ajax

0 голосов
/ 22 мая 2019

Я получаю 3 объекта из ответа AJAX в console.log().Однако в качестве выходных данных на веб-сайте отображаются только одни данные.

Я пытался использовать $.each с ответом от AJAX, но он показывает только данные из одного объекта.Я хочу, чтобы данные всех трех объектов отображались на веб-сайте. 

$.ajax({
  url: '/process/archiveFull1.php',
  type: 'POST',
  data: {
    id: 2018,
  },
  success: function(response) {
    if (typeof(response) != 'object') {
      response = $.parseJSON(response);
    }

    if (response.status.status == true) {
      $.each(response.body, function(key, value) {
        html_option = "<div class='carousel-inner'><div class='carousel-item active'><div class='top-with-controls-archive text-center'>" + value.id + "</h4></div><div class='body-archive'><div class='row py-2'><div class='col-md-3 col-sm-6'><a href='" + value.added_date + "'><img src='" + value.image + "' class='img-fluid'></a></div></div></div>";
      });
      $('#wrap').html(html_option);
    }
  }
});

Редактировать: Вот ответ, который я получаю Here

Ответы [ 3 ]

0 голосов
/ 22 мая 2019

Учитывая содержание ответа, показанного в вашем снимке консоли, это массив объектов.Таким образом, вы должны проходить через них и добавлять новый HTML в каждую итерацию этого цикла.В настоящее время вы переписываете предыдущее значение каждый раз.Попробуйте это: 

$.ajax({
  url: '/process/archiveFull1.php',
  type: 'POST',
  data: {
    id: 2018,
  },
  success: function(response) {
    if (typeof(response) != 'object') {
      response = $.parseJSON(response);
    }

    var html = response.map(function(obj) {
      return "<div class='carousel-inner'><div class='carousel-item active'><div class='top-with-controls-archive text-center'>" + obj.id + "</h4></div><div class='body-archive'><div class='row py-2'><div class='col-md-3 col-sm-6'><a href='" + obj.added_date + "'><img src='" + obj.image + "' class='img-fluid'></a></div></div></div>";
    });
    $('#wrap').html(html);
  }
});

Обратите внимание, что в ответе, который вы показали, нет никаких свойств body или status, поэтому убедитесь, что ответ возвращается так, как вы ожидаете.

0 голосов
/ 22 мая 2019

Ошибка в этой строке кода. 

 html_option = "<div class='carousel-inner'>..........................

Что вы делаете, это то, что вы сохраняете значение в html_option во время 1-й итерации, а затем заменяете его значениями 2-х итераций, а затем значениями3-й итерации.Таким образом, наконец, ваш html_option содержит только один набор значений.

Вы должны заменить приведенный выше код на 

html_option += "<div class='carousel-inner'>..........................

«+ =» добавляет каждый набор значений в html_option без замены предыдущего.

Или вы можете использовать append.http://api.jquery.com/append/

0 голосов
/ 22 мая 2019

Вы перезаписываете переменную html каждый раз в цикле, поэтому в конце она просто содержит вывод для последнего объекта. Вам нужно объединить, а не заменить. 

    if (response.status.status == true) {
      var html_option = '';
      $.each(response.body, function(key, value) {
        html_option += "<div class='carousel-inner'><div class='carousel-item active'><div class='top-with-controls-archive text-center'>" + value.id + "</h4></div><div class='body-archive'><div class='row py-2'><div class='col-md-3 col-sm-6'><a href='" + value.added_date + "'><img src='" + value.image + "' class='img-fluid'></a></div></div></div>";
      });
      $('#wrap').html(html_option);
    }
...