javascript - Filtering a JSON response with Vue - Stack Overflow

admin管理员组

文章数量:1289422

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: []
    }
},
ponents: {
    Product
},
puted: {
    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.

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: []
    }
},
ponents: {
    Product
},
puted: {
    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.

• javascript
• vue.js
• axios

Share Improve this question Follow edited Jul 14, 2022 at 1:38 tony19 139k2323 gold badges277277 silver badges347347 bronze badges asked Dec 27, 2018 at 18:23 paddyfieldspaddyfields 1,53922 gold badges1717 silver badges2828 bronze badges 2

• 1 So, what's wrong? – vahdet Commented Dec 27, 2018 at 18:26
• Nothing, just wanted to clarify this is the right way to do it. As in, can I filter the result on the initial axios call, or will I always need to filter it afterwards as a puted property? – paddyfields Commented Dec 27, 2018 at 18:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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'))
  })
}

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.

本文标签： javascriptFiltering a JSON response with VueStack Overflow