$.each 没有遍历所有来自 ajax 响应的对象答案

【问题标题】：$.each not looping through all the object coming in ajax response$.each 没有遍历所有来自 ajax 响应的对象
【发布时间】：2019-10-09 04:39:57
【问题描述】：

我从console.log() 的 AJAX 响应中获得 3 个对象。但是，网站中只有一个数据显示为输出。

我尝试使用$.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);
    }
  }
});

编辑：这是我收到的回复

【问题讨论】：

请注意对问题中的代码进行格式化，使其易于阅读。我已经为你编辑了它
关于这个问题，你能告诉我们response的内容到底是什么样子的吗
@RoryMcCrossan 添加问题时，我无法按 ctrl+k。
@RoryMcCrossan 我已添加收到的回复

标签： jquery ajax loops each

【解决方案1】：

每次循环都会覆盖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);
    }

【讨论】：

【解决方案2】：

鉴于控制台快照中显示的响应内容，它是一个对象数组。因此，您需要遍历它们，并在该循环的每次迭代中附加新的 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 属性，因此请确保响应按预期返回。

【讨论】：

【解决方案3】：

错误就在这行代码中。

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

您所做的是在第一次迭代期间将值存储在 html_option 中，然后用第二次迭代的值替换它，然后用第三次迭代的值替换它。所以最后你的 html_option 只包含一组值。

你应该用

替换上面的代码

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

"+=" 将每组值添加到 html_option 而不替换前一个。

或者你可以使用附加。 http://api.jquery.com/append/

【讨论】：