Stack Overflow Asked by TheYaXxE on February 15, 2021
I’m having a problem with an axios GET request in my alpine component.
It always returns a Promise instead of the actual data.
The GET request sends an array of id’s (which is stores in localstorage) to an API endpoint, where more data is loaded from the database for each of the id’s. When testing this is Postman, it’s working perfectly.
The problem happens when I’m trying to iterate the results with x-for
. It fails because the request do not contain the actual data, but a "Promise < pending >".
I’ve tried to call an aditional .then
on my getItems()
function but that still only returns the Promise instead of the data. I’ve also tried to use async
and await
but that doesn’t work either.
Heres my full code:
JS:
import axios from 'axios'
window.Spruce.store('my_store', {
items: [],
}, true)
window.myComponent = function() {
return {
itemIds() {
return this.$store['my_store'].items
},
getItems() {
return axios.get('http://my-application.test/wp-json/my-api/images/?ids=' + this.itemIds()).then((response) => {
return response.data
}).catch((error) => {
console.log(error)
})
},
}
}
async await attempt
async getItems() {
return await axios.get('http://my-application.test/wp-json/my-api/images/?ids=' + this.itemIds()).then((response) => {
return response.data
}).catch((error) => {
console.log(error)
})
},
HTML:
<div x-data="myComponent()">
<template x-for="item in getItems()">
<div x-text="item.title"></div>
</template>
</div>
Anyone know how I’m going to make getItems()
return the actual data so I can use it in my x-for
loop, in the HTML?
The problem is it's returning the promise from the axios
request.
We can solve it by assigning the results to the $store
and for each for the items in $store
as below,
import axios from 'axios'
window.Spruce.store('my_store', {
items: [],
}, true)
window.myComponent = function() {
return {
itemIds() {
return this.$store['my_store'].items
},
getItems() {
let vm = this;
return axios.get('http://my-application.test/wp-json/my-api/images/?ids=' + this.itemIds()).then((response) => {
vm.$store['my_store'].items = response.data; // assign it to items in the store
}).catch((error) => {
console.log(error)
})
},
}
}
Now we can do a for each for the items in the $store
<div x-data="myComponent()">
<template x-for="item in $store.my_store.items">
<div x-text="item.title"></div>
</template>
</div>
I used the $store
since you have used it for state management/sharing, but its not nessacsary, we can even have a property directly in the component level and assign the results to it.
Answered by Mohamed Irfan on February 15, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP