因为我只看到for循环的最后一个元素

Question

我遇到了问题；我有以下程序代码：

var xmlhttp = new XMLHttpRequest();
var url = "https://wjko5k6250.execute-api.us-east-2.amazonaws.com/motorcycle"; 
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
   var allmot = JSON.parse(this.responseText);
   console.log(allmot);
    for(var i = 0, len = allmot.Items.length; i < len; i++)
    {
      id=allmot.Items[i].id
      var url1 = "https://wjko5k6250.execute-api.us-east-2.amazonaws.com/motorcycle/"+id; 
      console.log(url1);
      xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          var myArr = JSON.parse(this.responseText);
          console.log(myArr);
          document.getElementById("img").src = myArr.Item.image;
          document.getElementById("brd").innerHTML = myArr.Item.brand;  
        }
      };
      xmlhttp.open("GET", url1, true);
      xmlhttp.send();
    }
  }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

allmot如下：

Items: Array (4)
0: {brand: 'Guzzi', id: '123456', image: 'moto_guzzi.jpg', date: '27/11/2021 '}
1: {brand: 'Bimota', id: '135623', image: 'bimota.jpg', date: '04/12/2021 '}
2: {brand: 'Ducati', id: '123789', image: 'b_desertx.jpg', date: ' 04/12/2021 '}
3: {brand: 'Benelli', id:' 146975 ', image:' benelli.jpg ', date: '27/11/2021'}

url1 返回（根据 for 循环）：

https://wjko5k6250.execute-api.us-east-2.amazonaws.com/articles/123456
https://wjko5k6250.execute-api.us-east-2.amazonaws.com/articles/135623
https://wjko5k6250.execute-api.us-east-2.amazonaws.com/articles/123789
https://wjko5k6250.execute-api.us-east-2.amazonaws.com/articles/146975

到目前为止，一切似乎都很好。

问题出在myArr；我注意到它只返回最后一个元素的图像和品牌，所以它的 id 等于 146975。

因此，for 循环似乎存在问题。

谁能帮帮我？谢谢大家。

Answer 1

作为第一次更正，我不会在内循环的外循环中回收 XHR 对象。

当你在内循环中说xmlhttp.onreadystatechange = function() ...时，xmlhttp已经在readystate中，在外循环中获得。

因此，无需进一步检查发生了什么，我将使用两个 XHR 对象（可能像 outerXmlhttp 和 innerXmlhttp）。我还会为每个循环重新创建内部 XHR：

var innerXmlhttp;

在外部封闭的顶部。

然后，在循环里面做：

innerXmlhttp = new XMLHttpRequest();

这是因为可变提升。如果你这样做：

var innerXmlhttp = new XMLHttpRequest();

在循环中，您可能会得到不同的行为。只是不要这样做并写下你的意思（提升变量并将它们分配到你真正需要的地方）。

如果所有这些还不够，请提出一个新的、更准确的问题来了解正在发生的事情。

这是您的更正代码：

var outerXmlhttp = new XMLHttpRequest();
var url = "https://wjko5k6250.execute-api.us-east-2.amazonaws.com/motorcycle"; 
outerXmlhttp.onreadystatechange = function() {
  var innerXmlhttp;

  if (this.readyState == 4 && this.status == 200) {
   var allmot = JSON.parse(this.responseText);
   console.log(allmot);
    for(var i = 0, len = allmot.Items.length; i < len; i++)
    {
      id=allmot.Items[i].id
      var url1 = "https://wjko5k6250.execute-api.us-east-2.amazonaws.com/motorcycle/"+id; 
      console.log(url1);

      innerXmlhttp = new XMLHttpRequest();
      innerXmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          var myArr = JSON.parse(this.responseText);
          console.log(myArr);
          document.getElementById("img").src = myArr.Item.image;
          document.getElementById("brd").innerHTML = myArr.Item.brand;  
        }
      };
      innerXmlhttp.open("GET", url1, true);
      innerXmlhttp.send();
    }
  }
};
outerXmlhttp.open("GET", url, true);
outerXmlhttp.send();

---

编辑：@Teemu 的鹰眼

正如@Teemu 在他的评论中指出的那样，如果您像这样反复将值重新分配给相同的 DOM 对象：

document.getElementById("img").src = myArr.Item.image;
document.getElementById("brd").innerHTML = myArr.Item.brand;  

你显然覆盖了之前的任何值。相反，您应该创建并附加这些 DOM 对象，更像这样：

var img = document.createElement("img");
img.src = myArr.Item.image;
var brd = document.createElement("p");
brd.innerText = myArr.Item.brand;
document.getElementById("motlist").append(img);
document.getElementById("motlist").append(brd);

显然，您需要一个 <div id="motlist"></div> 元素或 DOM 中的其他父元素来附加新元素。

对于分页，您可能还想清除列表中的那些元素...但在这里我们太过分了。