Problem with Axios

How do put axios in axios and get the data out in this case?

export const fetchPeoplesAction = (page = 1) => {
  return async (dispatch) => {
    dispatch(setIsFetching(true));

      const {data: {results}} = await axios.get(`/api/people/?page=${page}`);

      const peoplesMap = results.map(({name, url, homeworld}) => {

          const id = getId(url); // 1

          const homeworldId = getId(homeworld); //2

          const img = getImg(id) // https://img.jpg

          //Issue:
          //How do I get data here if axios is asynchronous? How can I make it asynchronous 
          //code and combine data to send to redux?
          

          axios.get(`/api/planets/${homeworldId}`).then(({data}) =>{

              const planetName  = data.name; //PlanetName
              
              //Here I get the data in console.log and can form an object, but it doesn't work - the 
              //code is asynchronous

              console.log(id, name, img, planetName)
              // 1, Luke, https://img.jpg, Tatoine

          })

      })

    Here I need to get an array of objects like:

    peoples Array : [ {id: 1, name: Luke, img: https//img.jpg, planetName: Tatoine}, ...etc object map]
    
    //The combined data goes to redux where it is processed on the client
    dispatch(setStarPeople(peoples)); 

  };
};

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.