0
  const getRecipes = async (flasks) => {
    let newList = []
    let recipes = flasks[0].recipes;
    await Promise.all(recipes.map(async (recipe) => {
      const response = await axios.get(`https://us.api.blizzard.com/data/wow/recipe/${recipe.id}?namespace=static-us&locale=en_US&access_token=${api_token}
      `)
      newList.push(response.data)
    }))
    // flasks[0].recipes.forEach(recipe => {axios.get(`https://us.api.blizzard.com/data/wow/recipe/${recipe.id}?namespace=static-us&locale=en_US&access_token=${api_token}
    // `).then(response => 
    //   newList.push(response.data)
    // )})
    console.log(new Date())
    console.log('logging newList')
    console.log(newList)
    return newList;
    // setpotions_recipes(newPotions);
  }
useEffect(() => {
    axios.get(`https://us.api.blizzard.com/data/wow/connected-realm/104/auctions?namespace=dynamic-us&locale=en_US&access_token=${api_token}`).then(
      response => {
        const auctionList = response.data.auctions;
        setAuctions(auctionList);
        console.log('fetched auctions');
      }
    )
    main();
  }, [])

  const main = async () => {
    getRecipes(flasks).then( response => {
      console.log('response:')
      console.log(response)
      getIngredientsList(response)
    })
  }
  const getIngredientsList = (recipe_type) => {
    let newList = new Map(ingredientsMap); //ingredientsMap is a state that holds information, this function tries to update ingredients (an array version of ingredientsMap)
    console.log('In getIngredientsList');
    console.log(recipe_type);
    console.log(recipe_type.length);

    recipe_type.forEach(item => {
      console.log('inside recipe_type forEAch')
      item.reagents.forEach(reagent => {
        newList.set(`${reagent.reagent.name}`, {id: reagent.reagent.id, min: Infinity})
      }
      )
    })
    console.log(new Date())
    setIngredientsMap(newList);
    let newArray = Array.from(ingredientsMap, ([name, {id, min}]) => ({name, id, min}))
    console.log(`logging ingredients from ${recipe_type}`)
    console.log(newArray);
    setIngredients(newArray);
  }

Essentially I am trying to grab a set of items from an api, and then parse those items afterwards. I'm new to asynchronous functions so what I tried is to make getRecipes asynchronous and once that returns its list, call getIngredientsList on that response.

However, getIngredientsList logs recipe_type to be of length 0. I believe this is because my asynchronous calls are not lining up correctly, but don't exactly know how to fix it.

GiantTeddyBears
  • 13
  • 4
  • it looks like you are calling main out of scope of the chain you are building. which is why length would be 0... try moving that call up into the scope of the return of the useEffect=>axios response scope, instead of where it sits now in useEffect outside axios scope. – altruios Mar 11 '21 at 22:19
  • yeah: looking closer, you def want main to happen AFTER the useEffect returns with data... so you need put it in the callback of the axios response.currently: useEffect will execute the axios, then without waiting for a response, execute that call to main... which will go on it's marry way until the data is fetched... at some point in the distance future. – altruios Mar 11 '21 at 22:22
  • okay thanks so much for the responses! I'll try that now. EDIT: didn't work! I think my code might be a bit confusing because the auctions part is completely unrelated to what I'm doing now. The fetch that I'm trying to await is in the forEach loop of getRecipes Whiiiiich I forgot to add... well shucks I added it now. – GiantTeddyBears Mar 11 '21 at 22:31

0 Answers0