Как фильтровать многомерный массив во vue js?

Question

[slfomin]

Как правильно фильтровать многомерный массив такого типа:

массив[группа][бренд][позиция]

[ { "title": "Запрашиваемый код детали",
    "brands": [ {
        "code": "123456",
        "name": "FILTR",
        "description": "Фильтр масляный",
        "positions": [ {
            "price": "221 ₽",
            "availability": "8 шт."
            },{
            "price": "236 ₽",
            "availability": "2 шт."
        } ],
    } ],
} ],

Я пытался делать таким образом:

Vue

props:{
        groups: Array,
    },
    computed: {
        filtered() {
            let filters = this.filters;
            return this.groups.filter((group) => {
                            let brands = group.brands.filter((brand) => {
                    if (!filters['brands'].value.includes(brand.name) && filters['brands'].value !== [] && !brand.positions) return false;
                    let positions = brand.positions.filter(function (position) {
                        Object.keys(filters).forEach((index) => {
                            if (index !== 'brands'){
                                if (!filters[index].value[0] <= parseInt(position[index]) || !filters[index].value[1] >= parseInt(position[index])) {
                                     return false;
                                }
                            }
                        });
                        return true;
                    });
                    return positions !== [];
                });
                return brands !== [];
            });
        },
        filters() { return this.$store.state.search.filters },
    }

Но так фильтрация происходит на каждом уровне вложенности и не срабатывает реактивность при изменении фильтров, значения которых точно реактивны и меняются в соответствующих инпутах, слайдерах и списке чекбоксов

Comments

[slfomin]

Мне нужно получить отфильтрованный массив, по цене, наличию и выбранному из списка бренду в фильтре

[Александр]

А не попробовать ли filter(brands).filter(availability).filter(price)

Разделите фильтры

1. Так проще читать код
2. Но скорость может упасть

Answer 1

[jeserg]

Где-то бывает проще проверить длину вложенного фильтрованого массива и использовать map, перебор в крайнем случае

Comments

[slfomin]

Выбрал таки перебор т.к. иначе не фильтровались вложенные массивы по параметрам

[jeserg]

вариант для вывода в плоской таблице

computed: {
    flatDetails: function () {
      return this.details.map((mtitle)=>{
        return mtitle.brands.map((mbrands)=>{
          return mbrands.positions.map((mpositions)=>{
            return {...mpositions, ...mtitle, ...mbrands}
          }).filter((flpositions)=>{
            return flpositions.price == '236 ₽'
          }).filter((flbrands)=>{
            return flbrands.name == 'FILTR1'
          })
        })
      }).flat(2)
    }
  },

или массив целиком без преобразования

computed: {
    flatDetails: function () {
      return this.details.filter((fldetails)=>{
         return fldetails.brands.filter((flbrands)=>{
             return flbrands.name == 'FILTR1'
         }).length > 0
      })
    }
  },