What causes Promise.all to misbehave in mapping an array?

Question

What causes Promise.all to misbehave in mapping an array?

I've been using Vue and attempting to make some axios requests within a map method over an array, but I'm getting unexpected results.

Here's my function:

  async getFavoriteRecipes(){
           try{
            let myRecipes=[]
            const response = await this.axios.get("https://david-matan-recipe-api-server.herokuapp.com/api/profiles/myprofile")
            let myFavoritedIds=response.data.favoriteRecipe;
            myRecipes= await Promise.all(myFavoritedIds.map(async (recipeInfo) =>{
                if(id.type==="spooncalur"){
                    const result = await this.axios.get("https://david-matan-recipe-api-server.herokuapp.com/api/recipes/"+recipeInfo.id)
                    myRecipes.push(result.data)
                    return myRecipes
                }
                else{
                    const result = (await this.axios.get("https://david-matan-recipe-api-server.herokuapp.com/api/recipes/userecipe/"+recipeInfo.id))
                    myRecipes.push(result.data)
                    return myRecipes
                }    
             }
            ))
            this.myFavoriteRecipe=myRecipes
           }
           catch(err)
           {
             if(err.response.status==='401'){
                 this.$root.store.username=undefined
                 this.$router.push('/login')
             }
              console.log(err.response)
           }
        }

I was expecting to receive an array of 6 JSON objects, but instead, I'm getting an array of 6 arrays with the same 6 JSON objects inside each one. Can anyone shed some light on why this is happening?

javascript vue.js dictionary promise

Answer 1

Answer №1

It appears that you are interested in storing an array of data from each request result. In this case, I recommend returning the data instead of pushing it to the myRecipes array. By doing so, the data will automatically be added or replaced in the list. Here is how the updated code would look:

async getFavoriteRecipes() {
    try {
        let myRecipes = []
        const response = await this.axios.get("https://david-matan-recipe-api-server.herokuapp.com/api/profiles/myprofile")
        let myFavoritedIds = response.data.favoriteRecipe;
        myRecipes = await Promise.all(myFavoritedIds.map(async (recipeInfo) => {
            if (id.type === "spooncalur") {
                const result = await this.axios.get("https://david-matan-recipe-api-server.herokuapp.com/api/recipes/" + recipeInfo.id)
                return result.data
            } else {
                const result = (await this.axios.get("https://david-matan-recipe-api-server.herokuapp.com/api/recipes/userecipe/" + recipeInfo.id))
                return result.data
            }
        }))
        this.myFavoriteRecipe = myRecipes
    } catch (err) {
        if (err.response.status === '401') {
            this.$root.store.username = undefined
            this.$router.push('/login')
        }
        console.log(err.response)
    }
}

If you need help understanding the map function, you can refer to these resources: https://www.youtube.com/watch?v=DC471a9qrU4 or https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Answer 2

It appears that you are interested in storing an array of data from each request result. In this case, I recommend returning the data instead of pushing it to the myRecipes array. By doing so, the data will automatically be added or replaced in the list. Here is how the updated code would look:

async getFavoriteRecipes() {
    try {
        let myRecipes = []
        const response = await this.axios.get("https://david-matan-recipe-api-server.herokuapp.com/api/profiles/myprofile")
        let myFavoritedIds = response.data.favoriteRecipe;
        myRecipes = await Promise.all(myFavoritedIds.map(async (recipeInfo) => {
            if (id.type === "spooncalur") {
                const result = await this.axios.get("https://david-matan-recipe-api-server.herokuapp.com/api/recipes/" + recipeInfo.id)
                return result.data
            } else {
                const result = (await this.axios.get("https://david-matan-recipe-api-server.herokuapp.com/api/recipes/userecipe/" + recipeInfo.id))
                return result.data
            }
        }))
        this.myFavoriteRecipe = myRecipes
    } catch (err) {
        if (err.response.status === '401') {
            this.$root.store.username = undefined
            this.$router.push('/login')
        }
        console.log(err.response)
    }
}

If you need help understanding the map function, you can refer to these resources: https://www.youtube.com/watch?v=DC471a9qrU4 or https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Answer 3

Answer №2

The issue has already been clarified by Ayk, however, the code can also be simplified to:

const url = "https://steve-jones-recipe-site.herokuapp.com/api/recipes/" + 
  id.type==="spooncalur" ? '' : 'usersselection/'
  
myRecipes = await Promise.all(mySavedIds.map(recipeData =>
  this.fetchData(url + recipeData.id)
))

There is no necessity to mark

this.fetchData(url + recipeData.id)

as asynchronous as Promise.all expects an array of promises as input, not resolved values

Answer 4

The issue has already been clarified by Ayk, however, the code can also be simplified to:

const url = "https://steve-jones-recipe-site.herokuapp.com/api/recipes/" + 
  id.type==="spooncalur" ? '' : 'usersselection/'
  
myRecipes = await Promise.all(mySavedIds.map(recipeData =>
  this.fetchData(url + recipeData.id)
))

There is no necessity to mark

this.fetchData(url + recipeData.id)

as asynchronous as Promise.all expects an array of promises as input, not resolved values

What causes Promise.all to misbehave in mapping an array?

Answer №1

Answer №2

Similar questions

Is your Angularjs code failing to execute properly?

retrieve JSON object from deferred response of AJAX request

Node JS post route experiencing issues with updating variables within function

Display text when hovered over or clicked to insert into an HTML table

Issue with updating bookmark symbol after delete, experiencing error 500 in AJAX on Rails

Parent passing down React state, but child component fails to update it

What is the best way to retrieve the document DOM object within an EJS template?

Module not discovered by nodeJS within the current directory

Optimizing performance with ng-if for 500 watchers

Tips for incorporating Vue's v-model with Bootstrap's button-group radios

Performing numerous asynchronous MongoDB queries in Node.js

How can API calls be efficiently made in React?

Tips for updating the content of a div with fresh data using a slideshow effect in jQuery

Phonegap app developer encounters issue with sending ajax requests

React Native App experiences immediate crashes when launched on TestFlight

Using Vue.js to pass a variable from a parent component to a child component

Icon fonts are not compatible with AngularJS, causing difficulties in their usage together

Convert the value of a Javascript variable into a PHP variable

Presenting a trio of distinct tables each accompanied by its own unique button option

automatically assign a default value to the data-html5 attribute