How to fetch api from the function which pushes each api in array?

Question

I am trying to get API data so i can render it on Webpage using ReactJS. I tried many different ways to fetch api where its stored in array. But i am unable to do it.

Note:https://www.hatchways.io/api/assessment/workers/<worker_id> Here i'm looping so the worker id gets add the of url.

const fetchAPI = e => {
    let array = [];
    const api2 = `https://www.hatchways.io/api/assessment/workers/`;

    for (var i = 0; i <= 4; i++) {
      array.push(api2 + i);
    }
    return array;
  };
  console.log(fetchAPI());

Thanks in advance.

Can you elaborate on "unable to do it"? What output are you expecting, what are you getting, and are there errors? Can you provide a minimal reproducible example? This code doesn't show any actual API calls, just strings being pushed onto an array. Thanks. — ggorlen
– ggorlen, Commented Nov 22, 2019 at 0:54
@ggorlen Okay! So i want to call api using the array which contains the url string. — Nirmal Patel
– Nirmal Patel, Commented Nov 22, 2019 at 1:04
Take a look at Promise.all for working with an array of asynchronous stuff — Bergi
– Bergi, Commented Nov 22, 2019 at 1:20

Asad Zaman · Accepted Answer · 2019-11-22 08:46:24Z

2

You need to hit the url first. Async/Await would be a good choice.

<script>
  async function check()
  {
    var arrayData =[];
    var url = "https://www.hatchways.io/api/assessment/workers/";
    for(var i=1;i<=4;i++)
    {          
      const response = await fetch(url+""+i);
      const myJson = await response.json();
      arrayData.push(myJson);
    }
    console.log(arrayData)

  }
  check();
</script>

edited Nov 22, 2019 at 8:46

answered Nov 22, 2019 at 4:40

Asad Zaman

4955 silver badges10 bronze badges

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

2 Comments

Nirmal Patel Over a year ago

It say arrayData.push(myJson); myJson is not defined

Asad Zaman Over a year ago

Sorry it was my mistake. Can you check now.

ricardoorellana · Accepted Answer · 2019-11-22 04:47:28Z

1

Use Promise.all for example:

const baseURL = 'https://jsonplaceholder.typicode.com';

const fetchUsers = fetch(`${baseURL}/users`);
const fetchPosts = fetch(`${baseURL}/posts`);

Promise.all([fetchUsers, fetchPosts]).then((responses) => {
  const responsesToJson = responses.map(response => response.json());
  
  return Promise.all(responsesToJson);
}).then((jsonResponse) => {
  const [userResponse, postResponse] = jsonResponse;
  
  console.log(userResponse);
  console.log(postResponse);
});

answered Nov 22, 2019 at 4:47

ricardoorellana

2,34024 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to fetch api from the function which pushes each api in array?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related