Фильтрация ответа JSON с помощью Vue

Question

Я практикую использование axios с Vue , но я думаю, что это может быть больше общего вопроса JSON.

Я успешно использовал axios, чтобы получить свой локальный файл products.json, и затем я использую фильтр, чтобы создать новый массив, в котором есть только продукты с соответствующим свойством отдела, и вычеркнуть их.

Это правильный способ сделать это, или я действительно могу отфильтровать результат JSON по исходному вызову axios?Я понимаю, что могу передать параметр, который, в свою очередь, будет выполнять конкретный вызов базы данных и в первую очередь предоставлять только необходимый JSON.

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

Спасибо.Просто пытаюсь прояснить теорию, стоящую за этим.

Answer 1

Работает по-разному в зависимости от вашей ситуации или требований.

Ваш способ работает.Кроме того, вы также можете отфильтровать результат непосредственно из вызова API, предполагая, что бэкэнд возвращает полный результат.

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

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

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

Answer 2

Если вы запрашиваете список продуктов с внутреннего сервера, вы можете использовать параметры запроса, такие как

xxx/products?department=XXX

, тогда внутренний сервер может выполнить фильтрацию за вас.

В вашем случае, похоже, что вы просто читаете локальный файл JSON, поэтому возвращается весь JSON, и вам нужно отфильтровать себя.