CODEWITHSUNDEEP
javascriptvue.jsaxioscomputed-properties
yareyaredaze
yareyaredaze

Reputation: 115

Axios result returns [object Promise]

I am getting feed images from flicker via their API,

I have a computed property filteredImages:

computed: {
filteredImages: async function() {
  return axios.get('https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=' + this.search + '&nojsoncallback=1')
  .then(function (response) {
    return response.data.items;
  })
}

},

when I console log the response.data.items it returns the correct result set, but when I display it in HTML, it displays [object Promise]

Here's the Pen

Any idea why this happens?

Upvotes: 0

Views: 881

Answers (3)

Girl Codes
Girl Codes

Reputation: 368

Best way to do it is to put the content of your computed in mounted and instead of return response.data.items you should fill it in a variable for example like below:

data() {
    return {
        items: null,
    }
},
mounted:{
    let vm = this;
    axios.get('https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=' 
    + this.search + '&nojsoncallback=1')
      .then(function (response) {
            vm.items = response.data.items;
      })
 }

and in the html u can simply use items it will be shown whenever its ready

Upvotes: 0

Nrujal Sharma
Nrujal Sharma

Reputation: 122

You can do something like this to get properties from an HTTP call and render them in DOM

new Vue({
    el: "#app",
    data: {
        search: "",
        filteredImages: "",
    },
    watch: {
        search: function (newVal, oldVal) {
            this.getItems();
        },
    },
    methods: {
        getItems: async function () {
            try {
                const { data } = await axios.get(
                    `https://api.flickr.com/services/feeds/photos_public.gne?format=jsonp&tags=${this.search}&nojsoncallback=1`
                );

                this.filteredImages = JSON.stringify(data.items)
            } catch (error) {
                console.error(error);
                this.filteredImages = error.toString();
            }
        },
    },
});

However there is an issue, flickr works with JSONP and axios or fetch does not support that

You need to use the JSONP module

Upvotes: 0

Anatoly
Anatoly

Reputation: 22793

Computed props don't support async functions. Moreover they rely on other reactive props to compute them lazily. So you need to call this async function directly every time you need to get filtered images and just put them into some reactive prop in data prop.

Upvotes: 1

Related Questions