Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 587
paddyfields Avatar asked Mar 04 '23 20:03

paddyfields


2 Answers

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'))
  })
}
like image 121
Ru Chern Chong Avatar answered Mar 15 '23 17:03

Ru Chern Chong


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.

like image 44
Tang Yun Avatar answered Mar 15 '23 19:03

Tang Yun