在 forEach 循环中，只显示最后一个值

Question

我正在使用 MET API 来显示特定部门中每个艺术作品的信息。为此，我尝试使用 forEach 遍历数组 first10。当我查看 console.log 时，我可以看到 first10 中的每个 objs，但是一旦到达 object.onload，我只得到最后一个 [=] 的“卡片”数组中的 14=]。

这是HTML:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">    
        </head>
    
        <body id="home">
            <main id="results-container"></main>
            <script src="js/script.js" type="text/javascript"></script>
        </body>
    </html>

这是JavaScript:

let resultsBody = document.getElementById('results-container');

      objects.open('GET', `https://collectionapi.metmuseum.org/public/collection/v1/objects?departmentIds=6`, true);
      objects.onload = function() {
        let data2 = JSON.parse(this.response);
        if (objects.status >= 200 && objects.status < 400) {
          let first10 = data2.objectIDs.slice(0, 4);
          intr = 0;
          first10.forEach(objs => {
            object.open('GET', `https://collectionapi.metmuseum.org/public/collection/v1/objects/${objs}`, true);
            object.onload = function() {
              let data3 = JSON.parse(this.response);
              if (object.status >= 200 && object.status < 400) {
                  const card = document.createElement('div');
                  card.setAttribute('class', 'card');
                  const images = document.createElement('div');
                  images.innerHTML = `<img src="${data3['primaryImageSmall']}">`;

                  const h1 = document.createElement('h1');
                  h1.style.color = "black";
                  h1.textContent = data3['title'];

                  const p = document.createElement('p');
                  p.style.color = "black";
                  p.textContent = data3['artistDisplayName'];

                  resultsBody.appendChild(card);
                  card.appendChild(images);
                  card.appendChild(h1);
                  card.appendChild(p);
                // }
              }
            }
            object.send();
          });
        }
      }
      objects.send();

我一直在想办法用每个objs的信息制作一张“卡片”。我一直在寻找与我相关的其他问题，但我并不真正理解它如何适用于我的问题，因为我还在 JavaScript.

开始

Answer 1

我认为你应该声明 new XMLHttpRequest(); 在每次 forEach 迭代中：

first10.forEach(objs => {
 /*HERE*/ let object  = new XMLHttpRequest(); 
 object.open('GET', `https://collectionapi.metmuseum.org/public/collection/v1/objects/${objs}`, true);

否则你 re-assigning 对同一个对象的新调用，所以你只得到最后一个。

在 forEach 循环中，只显示最后一个值

In forEach loop, only last value is shown

javascript

arrays

foreach

loops