TransWikia.com

How to get data from axios request?

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?

One Answer

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

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP