How to fetch multiple API Request or URL and retrieve data from each URL or API Request?

Question

In this method, I have fetched a single API Request URL

function fetchData() {
  let url = 'http://127.0.0.1:8000/api/onlineUserData';
  fetch(url)
    .then(response => response.json())
    .then(data => {
      var users=data.users;
      console.log(data.users);
    });
}

and when I do console.log(data.users). Result or data will come like this.

[["Month", "Anam", "Panam", "duliyan"], ["Apr-16", 21, 26, 29], ["May-07", 0, 0, 5]]

But now I want to fetch multiple URLs or API request and retrieve each API Request data at the same time. From this link I found the uses of promise but I don't how to use retrieve individual API Request Data How to fetch multiple API Request or URL at the same time?

function fetchData() {
  let urls = [
    'http://127.0.0.1:8000/api/onlineUserData',
    'http://127.0.0.1:8000/api/offlineUserData'
  ]
  let requests = urls.map(url => fetch(url));
  Promise.all(requests)
    .then(responses => responses.forEach(
      response => console.log(`${response.url}: ${response.status}`)
    ));
}

I can't figure out what you did with the answer. show your edited code. — kyun
– kyun, Commented Nov 2, 2020 at 7:23
@jinongun I just want to fetch two API URL and retrieve data from those URL and put in variable like var online-user and var offline-user.The main point of this i want to sum/add those data from two URL. — Saurav Shrestha
– Saurav Shrestha, Commented Nov 2, 2020 at 8:55
127.0.0.1:8000/api/userOnlineData 127.0.0.1:8000/api/userOfflineData 200 This in console.log() from your solution — Saurav Shrestha
– Saurav Shrestha, Commented Nov 2, 2020 at 12:10
Why don't you check response? I am not giving you the answer. I am just giving you advice. You should think about that. try console.log(response) instead of console.log(response.url); — kyun
– kyun, Commented Nov 2, 2020 at 12:35

Aadil Mehraj · Accepted Answer · 2020-11-02 14:26:00Z

2

Update your code to the following:

function fetchData(){
    let urls = [
     {
        url: 'http://127.0.0.1:8000/api/onlineUserData',
        type: 'offline'
     },
     {
        url: 'http://127.0.0.1:8000/api/offlineUserData',
        type: 'offline'
     },
     {
        url: 'http://127.0.0.1:8000/api/onlineUserData',
        type: 'online'
     },
    ];


    let requests = urls.map(item => fetch(item.url).then(response => response.json()));

    const resultData = { offline: [], online: [] };

    Promise.all(requests)
     .then(datas => {
       datas.forEach(
        (data, i) => {
         const url = urls[i];
         if (url.type === 'offline') 
             resultData.offine.push({...url, data});
         if (url.type === 'online') 
             resultData.online.push({...url, data});
        });

        console.log({resultData});
        /*
          {
             resultData: {
                offline: [
                  {
                    url: 'http://127.0.0.1:8000/api/oflineUserData',
                    type: 'offline',
                    data: [...]
                  },
                  {
                    url: 'http://127.0.0.1:8000/api/offlineUserData',
                    type: 'offline',
                    data: [...]
                  },
                ],
                online: [
                  {
                    url: 'http://127.0.0.1:8000/api/onlineUserData',
                    type: 'online',
                    data: [...]
                  },
                ]
             }
           }
        */
       }
  ));
}

edited Nov 2, 2020 at 14:26

answered Nov 2, 2020 at 7:06

Aadil Mehraj

2,6141 gold badge9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Saurav Shrestha Over a year ago

Thank you for your response but Suppose there two variable like online and offline and i want store each API Request data in variable respectively.like '127.0.0.1:8000/api/onlineUserData' data coming from this URL in online variable and 127.0.0.1:8000/api/offlineUserData in offline variable .

Aadil Mehraj Over a year ago

Can you update your answer with the snippet of how you want the result to be in the end

Saurav Shrestha Over a year ago

Let say i have two different URL '127.0.0.1:8000/api/onlineUserData', '127.0.0.1:8000/api/offlineUserData' I just only need to fetch them and retrive their data

Aadil Mehraj Over a year ago

I have updated the answer check the log about the output, see if it helps

Aadil Mehraj Over a year ago

yes it will work, make sure you define type: offline within urls

|

Collectives™ on Stack Overflow

How to fetch multiple API Request or URL and retrieve data from each URL or API Request?

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related