Handling two nested fetch and combine two JSON responses into one JSON to loop through

Question

So right now, I have a JSON fetch that gets my local 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);
      }
    });
}

Assuming the funct == "sources"

The data.sources array will look something like this:

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

For every item in data.sources, I want it to do ANOTHER fetch to an EXTERNAL API belonging to HaveIBeenPwned: https://haveibeenpwned.com/api/v3/breach/[ITEM]

So, say for the first one, it will be https://haveibeenpwned.com/api/v3/breach/123RF

That will return an array that looks like this:

{
    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
}

I want to create a NEW json array that's multi dimensional containing the Name of the site (from my first local API fetch), and the "Title, Description, and LogoPath" from the second API fetch. So I can then iterate through that new, restructured object and handle the data that way.

Answer 1

I did not test with a real data return, but your second call should look something like this:

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

It will pass in the data from the first API request; create an array of results to add your specified data to; iterate through the supplied data, call the second API, and push the 3 fields you wanted to the resultsArray; and then return your new resultsArray data to you.