过滤和显示嵌套的对象数据

Question

我有一个需要过滤的对象数组，并根据选中的复选框进行显示。我可以让它与一维数组一起工作，当我嵌套得更深时，我不知道如何让所有东西都能再次工作。

这是过滤数组的初始函数：

computed: {
selectedFilters: function() {
  let filters = [];
  let checkedFilters = this.shopFilters.filter(obj => obj.checked);
  checkedFilters.forEach(element => {
    filters.push(element.value);
  });
  return filters;
 }
}

Tis是它从中提取的数据：

shopFilters: [
    {
      name: 'price',
      categories: [
      {
        checked: false,
        value: 'Under $50'
      },
      {
        checked: false,
        value: '$50 to $100'
      },
      {
        checked: false,
        value: '$100 to $150'
      },
      {
        checked: false,
        value: '$150 to $200'
      },
      {
        checked: false,
        value: 'Over $200'
      },
      ]
    },
    {
      name: 'sports',
      categories: [
      {
        checked: false,
        value: 'lifestyle'
      },
      {
        checked: false,
        value: 'running'
      },
      {
        checked: false,
        value: 'basketball'
      },
      {
        checked: false,
        value: 'football'
      },
      {
        checked: false,
        value: 'soccer'
      },
      {
        checked: false,
        value: 'training & gym'
      },
      {
        checked: false,
        value: 'skateboarding'
      },
      {
        checked: false,
        value: 'baseball / softball'
      },
      {
        checked: false,
        value: 'golf'
      }
      ]
    }
  ]

这是过滤另一个文件中的产品数据以显示在页面上的函数：

    methods: {
    getfilteredData: function() {
      this.filteredData = data;
      let filteredDataByfilters = [];
      // first check if filters where selected
      if (this.selectedFilters.length > 0) {
        filteredDataByfilters= this.filteredData.filter(obj => this.selectedFilters.every(val => obj.indexOf(val) >= 0));
        this.filteredData = filteredDataByfilters;
      }
    }
   }

数据的外观：

const data = [
{
    name: 'SNKR 001',
    gender: 'Men',
    price: 100,
    sport: 'running',
    width: 'Wide',
    colors: ['black', 'white', 'green', 'pink'],
    sizes: [3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 13, 14, 15],
    image: '../assets/images/shoe-1.png'
},
{
    name: 'SNKR 002',
    gender: 'Men',
    price: 100,
    sport: 'running',
    width: 'Wide',
    colors: ['black', 'white', 'green', 'pink'],
    sizes: [3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 13, 14, 15],
    image: '../assets/images/shoe-1.png'
},
{
    name: 'SNKR 003',
    gender: 'Men',
    price: 100,
    sport: 'training & gym',
    width: 'Wide',
    colors: ['black', 'white', 'green', 'pink'],
    sizes: [3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 13, 14, 15],
    image: '../assets/images/shoe-1.png'
},
{
    name: 'SNKR 004',
    gender: 'Men',
    price: 100,
    sport: 'lifestyle',
    width: 'Wide',
    colors: ['black', 'white', 'green', 'pink'],
    sizes: [3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 13, 14, 15],
    image: '../assets/images/shoe-1.png'
}
];
export default data;

Answer 1

您可以将所有过滤器合并为一个数组：

const categories = this.shopFilters.map(item => item.categories)
const flatFilters = [].concat.apply([], categories)

然后，过滤器将变得扁平：

flatFilters: [{
    checked: false,
    value: 'Under $50'
  },
  {
    checked: false,
    value: '$50 to $100'
  },
  {
    checked: false,
    value: '$100 to $150'
  },
  {
    checked: false,
    value: '$150 to $200'
  },
  {
    checked: false,
    value: 'Over $200'
  },
  {
    checked: false,
    value: 'lifestyle'
  },
  {
    checked: false,
    value: 'running'
  },
  {
    checked: false,
    value: 'basketball'
  },
  {
    checked: false,
    value: 'football'
  },
  {
    checked: false,
    value: 'soccer'
  },
  {
    checked: false,
    value: 'training & gym'
  },
  {
    checked: false,
    value: 'skateboarding'
  },
  {
    checked: false,
    value: 'baseball / softball'
  },
  {
    checked: false,
    value: 'golf'
  }
]

然后使用可以应用旧的逻辑

computed: {
  selectedFilters: function() {
    let filters = [];
    const categories = this.shopFilters.map(item => item.categories)
    const flatFilters = [].concat.apply([], categories)
    let checkedFilters = flatFilters.filter(obj => obj.checked);
    checkedFilters.forEach(element => {
      filters.push(element.value);
    });
    return filters;
  }