过滤选择输入的最佳方法是什么？答案

【问题标题】：Which is the best way to filter in a select input?过滤选择输入的最佳方法是什么？
【发布时间】：2019-10-26 05:59:46
【问题描述】：

我从 API 收到此响应：

[
    {
        "id": 6,
        "nombre": "Pechuga de pollo",
        "categoria": "Pollo",
        "existencia": 100
    },
    {
        "id": 7,
        "nombre": "Pierna de pavo",
        "categoria": "Pollo",
        "existencia": 100
    },
    {
        "id": 8,
        "nombre": "Lonja de pescado",
        "categoria": "Pescado",
        "existencia": 200
    },
    {
        "id": 9,
        "nombre": "Coca Cola",
        "categoria": "Bebida",
        "existencia": 200
    },
    {
        "id": 10,
        "nombre": "Jugo de naranja",
        "categoria": "Bebida",
        "existencia": 200
    }
]

所以我需要通过值“categoria”过滤这些json，然后我将在我的模板上填充三个不同的选择输入。

我尝试了 filter() 方法，但我想我做错了：

///This is the function that filter needs on the argument:

filtradoBebida(bebida){
             bebida.categoria == "Bebida"
    },

///This is the function where I apply the filter method:

filtrarProductos(){
       this.bebidas = productosLista.filter(filtradoBebida)
 }

我想用值 categoria == "Bebida" 的 json 填充一个选择，用值 == "Pollo" 的 json 填充其他选择输入。

“bebidas”是我数据中的一个数组 ""productosLista" 是一个从 API 接收响应的数组。

你知道另一种通过过滤 json 值在 vuejs 中填充选择的方法吗？

【问题讨论】：

您缺少filtradoBebida 中的return 语句。
另外，调用该方法似乎应该是this.filtradoBebida。
我们需要更多上下文，我不知道filtradoBebida 是什么，但它看起来像一个对象的属性，如果是这样，你将不得不使用productosLista.filter(this.filtradoBebida)

标签： javascript json vue.js

【解决方案1】：

您还可以使用array.reduce 创建一个categoryMap，其中每个类别键都可以保存类似类别产品的列表。然后使用这个过滤后的产品列表来填充您的 3 个选择组件，如下所示：

const productosLista = [{
    "id": 6,
    "nombre": "Pechuga de pollo",
    "categoria": "Pollo",
    "existencia": 100
  },
  {
    "id": 7,
    "nombre": "Pierna de pavo",
    "categoria": "Pollo",
    "existencia": 100
  },
  {
    "id": 8,
    "nombre": "Lonja de pescado",
    "categoria": "Pescado",
    "existencia": 200
  },
  {
    "id": 9,
    "nombre": "Coca Cola",
    "categoria": "Bebida",
    "existencia": 200
  },
  {
    "id": 10,
    "nombre": "Jugo de naranja",
    "categoria": "Bebida",
    "existencia": 200
  }
]

const categoryMap = productosLista.reduce((acc, dt) => {
  acc[dt.categoria] = acc[dt.categoria] ? [...acc[dt.categoria], dt] : [dt]
  return acc;
}, {});

console.log(categoryMap);

for (category in categoryMap) {
  let sel = document.createElement('select');
  let categories = categoryMap[category];
  categories.forEach(category => {
    let option = document.createElement("option");
    option.setAttribute("value", category.nombre);
    option.text = category.nombre;
    sel.appendChild(option);
  });
  document.body.append(sel);
}

【讨论】：

【解决方案2】：

我对@987654321@ 后面的逗号有点困惑。
似乎它是某个对象的属性。
因此需要this 从这个对象内部调用它。

也是一个正确的过滤谓词，它应该返回一个布尔值。
你的总是返回undefined。

所以，试试

filtradoBebida(bebida){
             return bebida.categoria == "Bebida"
    },

///This is the function where I apply the filter method:

filtrarProductos(){
       this.bebidas = productosLista.filter(this.filtradoBebida)
 }

【讨论】：

【解决方案3】：

使用computed property。这是可以过滤其items的组件的基本轮廓：

<template>
  <ul>
    <li v-for="item in filteredItems" :key="item.id">{{ item.text }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      // Set this via an API call
      // Here we assume an item has: id, text, category
      items: [],
      // Use this as the v-model for a select
      // Here we assume '' is "no selection"
      category: '',
    };
  },
  computed: {
    filteredItems() {
      // Show all of the items if there is not category filter
      if (this.category === '') return this.items;
      return this.items.filter(item => item.category === this.category);
    },
  },
};
</script>

【讨论】：

【解决方案4】：

你没有正确使用filter。

我建议使用ES6 arrow function：

///This is the function where I apply the filter method:

filtrarProductos () {
       this.bebidas = productosLista.filter(x => x.categoria === "Bebida")
 }

【讨论】：