处理两个嵌套的 fetch 并将两个 JSON 响应组合成一个 JSON 以循环答案

【问题标题】：Handling two nested fetch and combine two JSON responses into one JSON to loop through处理两个嵌套的 fetch 并将两个 JSON 响应组合成一个 JSON 以循环
【发布时间】：2021-12-26 07:03:58
【问题描述】：

所以现在，我有一个获取本地 API 的 JSON 提取。

function lookupData(input, funct = "auto") {
  fetch("/lookup/" + input + "/" + funct, {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
  })
    .then((res) => res.json())
    .then((data) => {
      if (funct == "sources") {
        console.log(data.sources);
      } else {
        console.log(data.result);
      }
    });
}

假设函数 == "sources"

data.sources 数组如下所示：

{
    "123RF",
    "500px",
    "Adobe",
    "AntiPublic",
    "Apollo",
    "Bitly",
    "Dave",
    "Disqus",
    "Dropbox",
    "ExploitIn",
    "ShareThis",
    "Straffic",
    "Ticketfly",
    "Tumblr",
    "VerificationsIO"
}

对于 data.sources 中的每个项目，我希望它再次获取属于 HaveIBeenPwned 的外部 API：https://haveibeenpwned.com/api/v3/breach/[ITEM]

所以，假设第一个，它将是https://haveibeenpwned.com/api/v3/breach/123RF

这将返回一个如下所示的数组：

{
    Name: "123RF",
    Title: "123RF",
    Domain: "123rf.com",
    BreachDate: "2020-03-22",
    AddedDate: "2020-11-15T00:59:50Z",
    ModifiedDate: "2020-11-15T01:07:10Z",
    PwnCount: 8661578,
    Description: "In March 2020, the stock photo site 123RF suffered a data breach which impacted over 8 million subscribers and was subsequently sold online. The breach included email, IP and physical addresses, names, phone numbers and passwords stored as MD5 hashes. The data was provided to HIBP by dehashed.com.",
    LogoPath: "https://haveibeenpwned.com/Content/Images/PwnedLogos/123RF.png",
    DataClasses: [
        "Email addresses",
        "IP addresses",
        "Names",
        "Passwords",
        "Phone numbers",
        "Physical addresses",
        "Usernames"
    ],
    IsVerified: true,
    IsFabricated: false,
    IsSensitive: false,
    IsRetired: false,
    IsSpamList: false
}

我想创建一个新的多维 json 数组，其中包含站点名称（来自我的第一个本地 API 提取），以及来自第二个 API 提取的“标题、描述和徽标路径”。所以我可以遍历这个新的、重组的对象并以这种方式处理数据。

【问题讨论】：

标签： javascript json javascript-objects fetch-api

【解决方案1】：

我没有使用真实的数据返回进行测试，但您的第二次调用应该如下所示：

function displayResults(data) {

    const resultsArray = [];

    for(let i = 0; i < data.length - 1; i++) {
        let apiURL = "https://haveibeenpwned.com/api/v3/breach/" + data[i]; // requests to the correct url for each data.source
        let datum = callSecondAPI(apiURL);
        let tempObj = { 
            "Title": datum[1],
            "Description": datum[7],
            "LogoPath": datum[8]
        }
        resultsArray.push(tempObj);
    }

    console.log(resultsArray); // or `return` it instead of `console.log`, or however you want to display the results

}

function callSecondAPI(url) {
    const response = fetch(url);
    return response.json(); // parses JSON response into native JavaScript objects
    
}

displayResults(data.sources) // pass in the first array to the next function

它将传入来自第一个 API 请求的数据；创建一个结果数组以将您指定的数据添加到；遍历提供的数据，调用第二个 API，并将您想要的 3 个字段推送到 resultsArray；然后将新的 resultsArray 数据返回给您。

【讨论】：

我现在明白了，我忘记了其中的一个关键部分。我将编辑以包含第二个 API 请求
我收到错误：TypeError: response.json is not a function From return response.json();