處理兩個嵌套的 fetch 並將兩個 JSON 響應組合成一個 JSON 以進行循環

Question

所以現在，我有一個 JSON fetch 來獲取我的本地 API。

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);
      }
    });
}

假設功能==“來源”

data.sources 數組看起來像這樣：

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

對於 data.sources 中的每個項目，我希望它對屬於 HaveIBeenPwned 的 EXTERNAL 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 提取的“標題、描述和徽標路徑”。 所以我可以遍歷這個新的、重組的對象並以這種方式處理數據。

Answer 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 數據返回給您。