CODEWITHSUNDEEP
javascriptvue.jsaxios
paddyfields
paddyfields

Reputation: 1539

Filtering a JSON response with Vue

I'm practicing using axios with Vue, but I think this may be more of a general JSON question.

I've successfully used axios to get my local products.json file and I'm then using filter to create a new array that only has products that have a matching department property, and looping those out.

Is this the correct way of doing this, or can I actually filter the JSON result on the original axios call? I understand I can to pass a parameter which will in turn perform a specific database call, and only provide the required JSON in the first place.

data(){
    return {
        products: []
    }
},
components: {
    Product
},
computed: {
    foodProducts(){
        return this.products.filter(x => x.department == 'Food')
    }
},
mounted() {
    axios
    .get('./json/products.json')
    .then(response => (this.products = response.data.products))
}

Thanks. Just trying to clarify the theory behind it.

Upvotes: 4

Views: 13907

Answers (2)

Ru Chern Chong
Ru Chern Chong

Reputation: 3756

It works in many ways depending on your situation or requirement.

Your way works. Alternatively, you can also filter the result directly from the API call assuming that the backend is returning a full result.

data() {
 return {
  filteredProducts: []
 }
}

mounted() {
 axios.get(API_URL)
  .then(response => {
   const products = response.data

   this.filteredProducts = products.filter(product => product.department.includes('food'))
  })
}

Upvotes: 5

Tang Yun
Tang Yun

Reputation: 159

If you're querying the products list from a Back-end server, you may use query parameters like 

xxx/products?department=XXX

then the backend server can do the filtering for you.

In your case, it looks like you are simply reading a local JSON file, so the entire JSON is returned, and you have to filter yourself.

Upvotes: 2

Related Questions