javascript - How to make API calls for each element in array - Stack Overflow

admin管理员组

文章数量:1400409

I'm using Next.js / React.js. I'm using this API to get a specific country.

There's an array on this response called borders, for example.

borders: [
   "CAN",
   "MEX",
],

There's an end point to get the data based on a border, for example.

How would I get the data both borders, i.e. each element in the borders array? It's two API calls that I've tried to make in a loop, but I get undefined.

export async function getServerSideProps(context) {
  const { name } = context.params;
  const res = await fetch(`/${name}?fullText=true`)
  const countryRes = await res.json();

  const country = countryRes[0];

  // Get the borders
  const borders = country.borders;

  // I'm making an API call to each element in array
  const borderCountr = borders.forEach(border => {
    fetch(`/${border}`);
  });

  console.log(borderCountr); // undefinded
  if (!country) {
    return {
      notFound: true,
    }
  }

  return {
    props: { country }
  }
}

I'm using Next.js / React.js. I'm using this API to get a specific country.

There's an array on this response called borders, for example.

borders: [
   "CAN",
   "MEX",
],

There's an end point to get the data based on a border, for example.

https://restcountries.eu/rest/v2/alpha/can

How would I get the data both borders, i.e. each element in the borders array? It's two API calls that I've tried to make in a loop, but I get undefined.

export async function getServerSideProps(context) {
  const { name } = context.params;
  const res = await fetch(`https://restcountries.eu/rest/v2/name/${name}?fullText=true`)
  const countryRes = await res.json();

  const country = countryRes[0];

  // Get the borders
  const borders = country.borders;

  // I'm making an API call to each element in array
  const borderCountr = borders.forEach(border => {
    fetch(`https://restcountries.eu/rest/v2/alpha/${border}`);
  });

  console.log(borderCountr); // undefinded
  if (!country) {
    return {
      notFound: true,
    }
  }

  return {
    props: { country }
  }
}

• javascript
• reactjs
• rest
• next.js

Share Improve this question Follow edited Mar 6, 2021 at 18:13 karel 5,8956060 gold badges5757 silver badges5959 bronze badges asked Mar 6, 2021 at 12:06 user15342453user15342453 1

• Array.forEach doesn't return anything. You need const borderCountr = await Promise.all(borders.map => fetch(...).then(r => r.json())); – user5734311 Commented Mar 6, 2021 at 12:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

A good approach would be using Promise.all, to be sure that each fetch is correctly executed. Also, you need to make those calls async. something like:

const borderCountr = await Promise.all(
  borders.map(async (border) => {
    const response = await fetch(`https://restcountries.eu/rest/v2/alpha/${border}`);
    return await response.json();
  })
);
    
console.log(borderCountr[0], borderCountr[1]);

// I'm making an API call to each element in array
  const borderCountr = borders.forEach(border => {
    fetch(`https://restcountries.eu/rest/v2/alpha/${border}`);
  });

This is not awaited (you do not await for ANY of the fetch results) that mens, the code executes here, and without waiting for the fetches to finish - executed the next lines. As forEach returns undefined, that is your variable content.

本文标签： javascriptHow to make API calls for each element in arrayStack Overflow