Как сделать фильтрацию древовидных массивов?

Question

[Денис Лабутин]

Имеется следующий объект:

{
id: 1,
name: "Москва",
children: [
    {
        id:2,
        name: 'Академический'
        children: [
                {
                        id:3,
                        name: 'ул. Янгеля'
                }
               ....
        ]
    }
....
]
}

Т.е имеется 3 уровня вложенности, одного и того же родителя.
Нужно сделать поиск по символам, т.е. совпадение может быть и в названии района, и в названии улицы. И нужно оставлять всю ветку, если найдено в улице совпадение. Т.е. Город -> район -> улица.

Comments

[krka92]

Можно из дерева построить массив всех элементов, где хранить ссылку на сам элемент и его родителя. В массиве уже искать совпадения и в найденных элементах смотреть родителя и выстраивать цепочку Город -> Район и т.д.

Answer 1

[0xD34F]

Функция фильтрации получает массив и строку поиска, рекурсивно вызывается для дочерних элементов каждого из элементов переданного массива. Возвращает элементы, чей name содержит строку поиска или у кого после рекурсивного вызова остались дочерние элементы.

const filter = (arr, str) => (arr || [])
  .map(n => ({ ...n, children: filter(n.children, str) }))
  .filter(n => n.name.includes(str) || n.children.length);

Применительно к vue - оформляете отфильтрованный массив как вычисляемое свойство:

computed: {
  filteredItems() {
    return filter(this.items, this.search);
  },
},

https://jsfiddle.net/pL2fh506/