时间戳

首页 > 解决方案 > 在树视图中搜索对象数组并获取扩展的匹配节点

javascript - 在树视图中搜索对象数组并获取扩展的匹配节点

问题描述

我正在尝试创建一个反应搜索树组件，我将为其提供以下格式的数据，用户将在输入框中键入以搜索搜索树中的项目。匹配的项目应展开。下面是数据。

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”等属性</p> 

 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;
  }

从上面的代码我怎么能搜索输入字符串。我在使用递归时遇到问题。

我需要输出作为具有添加属性的整个对象数组以识别节点并突出显示匹配的文本

标签： javascriptreactjsecmascript-6

解决方案

我不确切知道您想要实现什么，但只是在这棵树中搜索 value: true 并为此分配新属性，您可以执行以下操作：

当更多过滤器可用时，您会更深入，但当没有更多层时，您只需检查 value===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

推荐阅读