Apply filter to API response - vue.js

Question

I have this method to get data from an API, which sends me information of many furniture pieces:

loadPieces() {
        this.isLoading = true;

        axios.get(this.galleryRoute)
            .then(r => {
                this.gallery = r.data;
                this.isLoading = false;
            })
            .catch(error => {
                this.$nextTick(() => this.loadPieces());
            });

        console.log(this.galleryRoute);
    },

This is a part of the response I get, which represents only one piece:

[[{"id":266,"name":" Tray 7x45x32, white stained ash","thumbnail":{"width":840,"height":840,"urls":{"raw":"http:\/\/localhost:8888\/storage\/9c\/9d\/9c9dadc6-15a2-11e8-a80a-5eaddf2d1b4a.jpeg","small":"http:\/\/localhost:8888\/storage\/9c\/9d\/[email protected]","medium":"http:\/\/localhost:8888\/storage\/9c\/9d\/[email protected]"}}},

Now I want to create a filter so that I can get a specific piece from the JSON object, using it's id. I've tried searching but so far I have no idea how to do this.

Thanks in advance!

It's a bit unclear, what are you asking.Could you please provide your previous attempts ? Maybe this could help stackoverflow.com/questions/41791482/filter-list-with-vue-js/… — Belmin Bedak
– Belmin Bedak, Commented Feb 22, 2018 at 13:09

Tom Fenech · Accepted Answer · 2018-02-22 13:13:47Z

2

Add a computed property which applies the filter to this.gallery:

computed: {
  filteredGallery() {
    if (!this.gallery) return []; // handle gallery being unset in whatever way

    return this.gallery.filter(picture => 
      // some reason to show picture
    );
  }
}

I'm assuming gallery is an array, but you could apply a similar technique to it if it was an object, using e.g. Object.keys(this.gallery).

Then in your template, use filteredGallery instead of gallery.

answered Feb 22, 2018 at 13:13

Tom Fenech

75.1k13 gold badges119 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Apply filter to API response - vue.js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related