无法循环遍历数组并吐出 API 结果

Question

我正在使用 NY state legislature API 并且遇到了麻烦，我为每个项目获得相同的输出（仅与数组中的第一项相关）。我检查了一下，柜台似乎确实在增加，所以我不确定为什么它没有显示所有的账单号码。

<script>
    $(document).ready(function() {
        const bills = ["A6143", "S737", "A2260", "S8455A", "A559", "S737", "A3041", "S1234"];
        var printNo = [];
        var title = [];
        var counter = 0;
        bills.forEach(function (item, index) {
            $.getJSON("https://legislation.nysenate.gov/api/3/bills/2021/" + bills[counter] + "?key=[mykeygoeshere]", function(item) {
                printNo[counter] = item.result.printNo;
                title[counter] = item.result.title;
                document.write("<p>" + printNo[counter] + ". ");
                document.write(title[counter] + "</p>");
                counter++;
            });
        });
    });
</script>

我最终要尝试的是比较所有账单的最新项目并显示最新更新的提要。 （例如，最近的两个动作可能是同一张账单。）但首先，我什至不知道如何在数组中迭代和显示标题，更不用说复杂的“动作”内容了。

这是 API 信息，但我认为这与这里无关。以防万一：https://legislation.nysenate.gov/static/docs/html/index.html

Answer 1

您正在 jquery getJson 调用的回调中更新您的计数器。所以 forEach 的每次迭代都有相同的 counter 值。

增加 forEach 函数主体中的计数器，与 getJSON 处于同一级别。

您为什么还要为网址上的 bills[counter] 烦恼？您可以在 forEach 回调函数的参数中获取每个项目。

$.getJSON("https://legislation.nysenate.gov/api/3/bills/2021/" + item...

Answer 2

页面加载后您不能使用document.write。它完全消除了整个页面。由于 $.getJSON 是异步的，每组 document.write 也可能会清除之前的那些

而是创建元素并插入到文档中，在您已经建立的容器中保存它们。

接下来，您可以将所有这些请求映射到一个 promise 数组，并在所有请求解决后使用 Promise.all() 处理所有结果

类似的东西：

$(document).ready(function() {
  const apiUrl = "https://legislation.nysenate.gov/api/3/bills/2021/";
  const bills = ["A6143", "S737", "A2260", "S8455A", "A559", "S737", "A3041", "S1234"];
  // array of request promises
  const requests = bills.map(bill => {
    return $.getJSON(apiUrl + bill + "?key=[mykeygoeshere]")
  });

  Promise.all(requests).then(results => {
    for (let {printNo, title} of results) {
      const $p = $('<p>').text(printNo + '.' + title);                  
      $('#someContainerId').append($p)
    }   
  }).catch(err => console.log('Oooops, one of the requests failed'));
});