How to use json data from two different endpoints in a function at the same time?

Question

So I want to pull data from two different endponts, and send them both to a function at the same time, as the parameters for said function.

function otherFunc(jsonData1, jsondata2){
//do stuff
}



function getJsonData(url1,url2){
fetch(url1);
fetch(url2);
.then((response) => response.json())
.then((data) => otherFunc(data));
}
getJsonData(someUrl1, someOtherUrl2);

So I know how to send one set of data to a function, and I know how to make multiple get requests but I don't know how I can send both sets of jsonData to the same function as params.

Thanks in advance

pilchard · Accepted Answer · 2021-07-11T07:26:14.113

A little clearer using async/await

function otherFunc(jsonData1, jsonData2) {
  //do stuff
}

async function getJsonData(url1, url2) {
  const res1 = await fetch(url1);
  const res2 = await fetch(url2);

  const json1 = await res1.json();
  const json2 = await res2.json();

  otherFunc(json1, json2);
}

getJsonData(someUrl1, someOtherUrl2);

Alternatively using Promise.all()

function otherFunc(jsonData1, jsonData2) {
  //do stuff
}

async function getJsonData(url1, url2) {
  const resArr = await Promise.all(
    [url1, url2].map(url => fetch(url))
  );

  const [json1, json2] = await Promise.all(
    resArr.map(res => res.json())
  );

  otherFunc(json1, json2)
}

getJsonData(someUrl1, someOtherUrl2);

or...

function otherFunc(jsonData1, jsonData2) {
  //do stuff
}

function getJsonData(url1, url2) {
  Promise.all([
    fetch(url1),
    fetch(url2)
  ]).then(responses => //map the returned promises to resolve json
    Promise.all(responses.map(res => res.json()))
  ).then(([json1, json2]) => // destructure resolved json
    otherFunc(json1, json2)
  ).catch(error =>
    // if there's an error, log it
    console.log(error));
}

getJsonData(someUrl1, someOtherUrl2);

wow that is so much simpler than i was expecting thanks so much! — broncoian2, Jul 09 '21 at 20:16

Amir · Answer 2 · 2021-07-09T20:20:56.813

function otherFunc(jsonData1, jsondata2){
//do stuff
}

function getJsonData(url1,url2){
    fetch(url1).then(res1 => {
        fetch(url2).then(res2 => {
            // here you have both responses ready
            otherFunc(res1.json(), res2.json());
        })
    })
}
getJsonData(someUrl1, someOtherUrl2);

Solution 2 using async-await:

async function getData(url = '') {
  const response = await fetch(url);
  return response.json();
}

function otherFunc(jsonData1, jsondata2){
    //do stuff
}

async function getJsonData(url1,url2){
    const res1 = await getData(url1);
    const res2 = await getData(url2);
    
    otherFunc(res1, res2);
}

getJsonData(someUrl1, someOtherUrl2);

score 0 · Answer 3 · answered Jul 09 '21 at 20:21

I would add the two URLs into an array in getJsonData and loop through them storing the results into an array

function getJSONData(url1,url2){
  const urlArr = [url1, url2]
  const resultsArr = []
  for(let x = 0; x < arr.length){
    fetch(arr[x])
  }

  return resultsArr
}

score 0 · Answer 4 · answered Jul 09 '21 at 20:27

Inspired by this Wait for multiple promises to finish maybe this can work and avoir having any cascade wait.

function otherFunc(jsonData1, jsondata2){
//do stuff
}

function getJsonData(url1,url2){
    var json1, json2;

    const promise1 = fetch(url1).then(res1 => { json1 = res1.json() });
    const promise2 = = fetch(url2).then(res1 => { json2 = res1.json() });

    Promise.all([promise1, promise2]).then((values) => {
      otherFunc(values[0], values[1]);
      
      //Or if order of parmeter matter
      
      otherFunc(json1, json2);
    });
}


getJsonData(someUrl1, someOtherUrl2);

How to use json data from two different endpoints in a function at the same time?

4 Answers4