javascript - 基于多个条件和多个数组进行过滤？

Question

我有一个 JSON 格式的产品列表，如下所示:

{
    "products": [
        {
            "tags": ["filter-color-White", "filter-style-Low 1", "5", "6", "7", "8", "9", "10", "11", "12", "13"],
            "styles": ["filter-style-Low 1"],
            "colors": ["filter-color-White"],
            "sizes": ["5", "6", "7", "8", "9", "10", "11", "12", "13"]
        }, 
        {
            "tags": ["filter-color-Black", "filter-color-Red", "filter-color-Blue", "filter-style-Boot", "7", "8", "9", "12", "13"],
            "styles": ["filter-style-Boot"],
            "colors": ["filter-color-Black", "filter-color-Red", "filter-color-Blue"],
            "sizes": ["7", "8", "9", "12", "13"]
        }, 
        {
            "tags": ["filter-color-Black", "filter-color-Red", "filter-style-Gat", "7", "8", "9", "10", "11", "12", "13"],
            "styles": ["filter-style-Gat"],
            "colors": ["filter-color-Black", "filter-color-Red"],
            "sizes": ["7", "8", "9", "10", "11", "12", "13"]
        }
        ...
        ...
        ...
    ]
}

如您所见，有样式、颜色和尺寸。还有一个 tags 项，它实际上是由前面的所有三个项组成的。

我需要有人能够根据多个选择进行过滤。例如，如果有人选择 Low 1 样式，然后选择黑色，则向他们展示该样式的黑色项目。但如果他们也选择白色，则向他们显示白色或黑色，或两者兼而有之。与尺寸选择相同。示例:Low 1 商品为黑色或白色，并且尺寸为 5 或尺寸 6，或两者兼而有之。

最后，应该可以一次选择多种样式，并且应该可以在不选择样式的情况下选择颜色和尺寸。上面的例子是这样的，但是然后在上面添加另一个样式，比如 Boot 样式。然后它应该返回符合所有条件的产品。

这可行吗？

目前我正在这样做:

let filterOptions = this.selectedOptions;
this.products.forEach(product => {
  if (filterOptions.some(item => product.tags.includes(item))) {
    return product.visible = true;
  } else if(filterOptions.length == 0) {
    return product.visible = true;
  } else {
    return product.visible = false;
  }
})

其中 product.visible 只是一个简单的 bool 值，允许 vuejs 是否在页面上显示该项目，而 this.selectedOptions 是一个数组，每次动态填充有人在过滤器内添加/删除选项的时间。它想要的示例:

this.selectedOptions = ["filter-style-Erving","filter-color-Black","filter-color-Brown","8","9"]

上面的过滤代码可以工作，但不可靠。它返回与任何条件匹配的所有项目，而不考虑其他选定的过滤器。如果我将 some 更改为 every ，则会发生相反的情况，然后它会尝试仅查找具有红色和黑色的项目。或者 5 AND 6 尺寸等。

我或多或少地尝试在 https://www.everlane.com/collections/mens-tees 上复制过滤

Answer 1

您可能会发现这很有用。

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#hook',
  template: '#app-template',
  data: () => ({
    data: [{
        styles: ["filter-style-Low 1"],
        colors: ["filter-color-White"],
        sizes: ["5", "6", "7", "8", "9", "10", "11", "12", "13"]
      },
      {
        styles: ["filter-style-Boot"],
        colors: ["filter-color-Black", "filter-color-Red", "filter-color-Blue"],
        sizes: ["7", "8", "9", "12", "13"]
      },
      {
        styles: ["filter-style-Gat"],
        colors: ["filter-color-Black", "filter-color-Red"],
        sizes: ["7", "8", "9", "10", "11", "12", "13"]
      }
    ],
    filters: {
      styles: [],
      colors: [],
      sizes: []
    },
    additiveFiltering: false
  }),
  computed: {
    products() {
      return this.data.map(product => ({
        ...product,
        tags: this.tags(product)
      }))
    },
    filteredProducts() {
      return this.products.filter(
        this.additiveFiltering
        ? p => this.x(this.filters.styles, p.styles).length
            || this.x(this.filters.colors, p.colors).length
            || this.x(this.filters.sizes, p.sizes).length
        : p => (!this.filters.styles.length
                || this.x(this.filters.styles, p.styles).length)
            && (!this.filters.colors.length
                || this.x(this.filters.colors, p.colors).length)
            && (!this.filters.sizes.length
                || this.x(this.filters.sizes, p.sizes).length)
            
      )
    },
    allStyles() {
      return this.getAll('styles')
    },
    allColors() {
      return this.getAll('colors')
    },
    allSizes() {
      return this.getAll('sizes')
    }
  },
  methods: {
    tags(product) {
      return [].concat(product.styles, product.colors, product.sizes)
    },
    logger(obj) {
      return JSON.stringify(obj, null, 2)
    },
    getAll(prop) {
      return [ ...new Set([].concat.apply([], this.data.map(item => item[prop])))]
    },
    x(arr1, arr2) {
      return arr1.filter(val => arr2.includes(val))
    }
  }
})

ul>li>span {
  background-color: #333;
  color: white;
  padding: 0 5px 2px;
  margin: 0 5px 5px 0;
  border-radius: 3px;
  font-variant: all-petite-caps;
  font-family: monospace;
}
.filters {
  display: flex;
}
.filters > div {
  flex: 1;
}
.filters > div:last-child {
  columns: 2;
}
.filters > div:last-child div{
  column-span: all;
}
.filters label {
  display: block;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  margin: 5px;
  border: 1px solid transparent;
  padding: 1rem;
}
.selected {
  background-color: #f5f5f5;
  border-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script type="text/template" id="app-template">
  <div id="app">
    <div class="filters">
      <div>
        <div>Style</div>
        <label v-for="style in allStyles" :key="style">
          <input type="checkbox" v-model="filters['styles']" :value="style">
          {{style}}
        </label>
      </div>
      <div>
        <div>Colors</div>
        <label v-for="color in allColors" :key="color">
          <input type="checkbox" v-model="filters['colors']" :value="color">
          {{color}}
        </label>
      </div>
      <div>
        <div>Sizes</div>
        <label v-for="size in allSizes" :key="size">
          <input type="checkbox" v-model="filters['sizes']" :value="size">
          {{size}}
        </label>
      </div>
    </div>
    Additive filtering: <input type="checkbox" v-model="additiveFiltering">
    <h3>Products</h3>
    <ul>
      <li v-for="(product, key) in products" :key="key" 
      :class="{selected: filteredProducts.includes(product)}">
        <span v-for="tag in product.tags" :key="tag" v-text="tag"></span>
      </li>
    </ul>
    <pre v-text="{filters}"></pre>
  </div>
</script>
<div id="hook"></div>

相关位是x方法，它是一个数组交集。