Фильтрация и отображение данных вложенных объектов

Question

У меня есть массив объектов, которые необходимо отфильтровать и отобразить в зависимости от того, какой флажок установлен.Я могу заставить его работать с одномерным массивом, когда я вкладываю глубже, я не понимаю, как заставить все работать снова.

Это начальная функция, которая фильтрует массив:

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

Это данные, из которых он извлекает:

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

Вы можете объединить все фильтры в 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;
  }