Поиск массива объекта в древовидной структуре и получение расширенных совпадающих узлов

Question

Я пытаюсь создать компонент реагирующего дерева поиска, для которого я буду предоставлять данные в следующем формате, и пользователь будет вводить в поле ввода для поиска элементов в дереве поиска.Подходящие элементы должны быть расширены.Ниже приведены данные.

const JSON = [
  {
    label: "Make",
    filters: [
      {
        label: "Year",
        filters: [
          {
            name: 2011,
            value: true
          },
          {
            label: "Month",
            filters: [
              {
                name: "Jan",
                value: false
              },
              {
                name: "Mar",
                value: true
              },
              {
                name: "Aug",
                value: true
              },
              {
                name: "Oct",
                value: false
              }
            ]
          }
        ]
      },
      {
        label: "Type",
        filters: [
          {
            name: "Basic",
            value: true
          },
          {
            label: "Premium",
            filters: [
              {
                name: "Luxury",
                value: true
              },
              {
                name: "Super Luxury",
                value: false
              }
            ]
          },
          {
            name: "Sport",
            value: false
          }
        ]
      }
    ]
  },
  {
    label: "Year",
    filters: [
      {
        name: 2011,
        value: false
      },
      {
        name: 2012,
        value: true
      },
      {
        name: 2013,
        value: false
      },
      {
        name: 2014,
        value: true
      },
      {
        name: 2015,
        value: false
      },
      {
        name: 2016,
        value: true
      },
      {
        name: 2017,
        value: false
      }
    ]
  },
];

Когда пользователь выполняет поиск из элемента управления вводом, я хочу отфильтровать представление дерева и предоставить новый массив объектов с добавленными свойствами, такими как «isExpanded» и «highlightStr»

 searchTree(data) {
    let count = 0;
    let tierCount = 0;
    let isGroup = false;
    data.filters.forEach(filter => {
      if (filter.filters) {

        tierCount = this.searchTree(filter);
     //how can i search here ? and add properties 
     // like isExpanded or highlightStr

      } else {
        if (filter.value) {

        }
      }
    });
    return count;
  }

Из приведенного выше кода, как я могу найти строку ввода.У меня проблемы с рекурсией

Answer 1

Я не знаю точно, чего вы хотите достичь, но для простого поиска значения: true в этом дереве и присвоения нового свойства для этого вы делаете что-то вроде этого:

когда вы получаете больше фильтров, вы идетеглубже, но когда уровней больше нет, вы просто проверяете значение === true и назначаете новое свойство.

function searchTree(data) {
   let count = 0;
   let tierCount = 0;
   let isGroup = false;

   data.filters.forEach(filter => {
      if (filter.filters) {
        tierCount = this.searchTree(filter);
      } 

      if (filter.value) {
        filter.isExpanded = true;
      }
    });

    return count;
}

https://codepen.io/mskalniak/pen/QJoJMg