Is there a way to make an api call within a map of another api call?

Question

I know the title is quite confusing, I wasn't sure how to word it better. What I am trying to do is to fetch some items, map through those items to display them, but the problem is that one of those items has a value of what needs to be another api call to access it.

This is what I'm trying to do:

First of all I am storing an empty state, which later on becomes the data of the fetched items:

const [data, setData] = useState([]);

I'm using axios to fetch and store the data:

const fetchItems = () => {
  axios("https://swapi.dev/api/people")
    .then((response) => {
      console.log(response.data.results);

      const newData = response.data.results.map((item) => ({
        name: item.name,

        homeworld: () => {
          axios.get(item.homeworld).then((response) => {
            response.data.results;
          });
        },
      }));
      setData(newData);
    })

    .catch((error) => {
      console.log("error", error);
    });
};

It works with the name because it's a simple value. However, the homeworld includes a link that needs to be called once again in order to access it, instead of being a simple value like the name in this case. How can I call it and access what values are held within that link, and display them instead of just displaying the url?

Answer 1

I hope this can help you:

const [data,setData] = useState([])
const fetchItems = () => {
  axios("https://swapi.dev/api/people")
    .then(response => {
      console.log(response.data.results);

      const { results } = response.data;

      for (const item of results) {
         axios.get(item.homeworld).then(({data}) => {
          setData([...data,{ name: item.name, homeworld: data.results }]);
        });
      }
    })
    .catch(error => {
      console.log("error", error);
    });
};

or with fetch:

const [data,setData] = useState([])
fetch("https://swapi.dev/api/people").then(re=>re.json())
    .then(response => {
      const newData = []
      const { results } = response;
      const newData = [];
      for (const item of results) {
         fetch(item.homeworld).then(re => re.json()).then((data) => {
             newData.push({ name: item.name, homeworld: data });
         });
      }
      console.log(newData)
      setData(newData)
    })
    .catch(error => {
      console.log("error", error);
    });

Answer 2

Use Promise.all()

You can use Promise.all() method to get all the information you need by creating an array of promises by mapping the response.results array with an async function.

This is the code example

const fetchItems = async () => {
  const req = await axios.get("https://swapi.dev/api/people");
  const response = await req.data;

  const allDataPromises = response.results.map(async (item) => {
    const itemReq = await axios.get(item.homeworld);
    const itemResponse = await itemReq.data;
    return {
      name: item.name,
      homeworld: itemResponse,
    };
  });

  const allData = await Promise.all(allDataPromises);
};

For further information about Promise.all()