JS树结构数据模糊查找并返回所有符合条件节点及其父节点

Question

用js或ts, 模糊查找树结构数据并返回所有符合条件节点及其父节点

数据结构如下：

SYSMGTLISTDATA = [
  {
    device_id: '1',
    depth: 0,
    device_name: 'Utility-132',
    device_type: 'Power Source',
    sub: [
      {
        device_id: '1',
        depth: 1,
        device_name: 'Utility-1',
        device_type: 'Power Source',
        sub: [
          {
            device_id: '2',
            depth: 2,
            device_name: 'Transformer-PP-01',
            device_type: 'Transformer',
            sub: [
              {
                depth: 3,
                device_name: 'SW1',
                device_type: 'Switch Board',
                sub: [
                  {
                    depth: 4,
                    device_name: 'UPS-A',
                    device_type: 'Mission critical equipment',
                    sub: [
                      {
                        depth: 5,
                        device_name: 'BD-CA',
                        device_type: 'Riser',
                        sub: [
                          {
                            depth: 6,
                            device_name: 'Transformer-1',
                            device_type: 'Transformer',
                            sub: [
                              {
                                depth: 7,
                                device_name: 'DS-1',
                                device_type: 'Fused DS',
                                sub: [
                                  {
                                    depth: 8,
                                    device_name: 'STS-1',
                                    device_type: 'DP/STS',
                                    sub: [
                                      {
                                        depth: 9,
                                        device_name: 'PUD-1',
                                        device_type: 'PUD',
                                        sub: [
                                          {
                                            depth: 10,
                                            device_name: 'PP1-1',
                                            device_type: 'PP',
                                            sub: [
                                              {
                                                depth: 11,
                                                device_name: 'Breaker-1-1-1',
                                                device_type: 'Breaker',
                                              },
                                            ],
                                          },
                                          {
                                            depth: 10,
                                            device_name: 'PP1-2',
                                            device_type: 'PP',
                                            sub: [
                                              {
                                                depth: 11,
                                                device_name: 'Breaker-1-2-1',
                                                device_type: 'Breaker',
                                                sub: [
                                                  {
                                                    depth: 12,
                                                    device_name: 'PUD-3',
                                                    device_type: 'PUD',
                                                    sub: [
                                                      {
                                                        depth: 13,
                                                        device_name: 'Breaker-2-1-1',
                                                        device_type: 'Breaker',
                                                      },
                                                      {
                                                        depth: 13,
                                                        device_name: 'Breaker-2-1-3',
                                                        device_type: 'Breaker',
                                                      },
                                                      {
                                                        depth: 13,
                                                        device_name: 'Breaker-2-1-3',
                                                        device_type: 'Breaker',
                                                      },
                                                      {
                                                        depth: 13,
                                                        device_name: 'Breaker-2-1-4',
                                                        device_type: 'Breaker',
                                                      },
                                                      {
                                                        depth: 13,
                                                        device_name: 'Breaker-2-1-5',
                                                        device_type: 'Breaker',
                                                      },
                                                    ],
                                                  },
                                                ],
                                              },
                                            ],
                                          },
                                        ],
                                      },
                                    ],
                                  },
                                  {
                                    depth: 8,
                                    device_name: 'breaker2',
                                    device_type: '111',
                                  },
                                ],
                              },
                              {
                                depth: 7,
                                device_name: 'DS-2',
                                device_type: 'Fused DS',
                                sub: [
                                  {
                                    depth: 8,
                                    device_name: 'PUD-2',
                                    device_type: 'PUD',
                                  },
                                ],
                              },
                            ],
                          },
                        ],
                      },
                      {
                        depth: 5,
                        device_name: 'BD-CB',
                        device_type: 'Riser',
                      }
                      ,
                      {
                        depth: 5,
                        device_name: 'BD-Cc',
                        device_type: 'Riser',
                      },
                    ],
                  },
                ],
              },
              {
                depth: 10,
                device_name: 'PP1-1',
                device_type: 'PP'
              }
            ],
          },
        ],
      },
    ],
  },
];

期待的结果：

查找 device_name包含'PP',返回

SYSMGTLISTDATA = [
  {
    device_id: '1',
    depth: 0,
    device_name: 'Utility-132',
    device_type: 'Power Source',
    sub: [
      {
        device_id: '1',
        depth: 1,
        device_name: 'Utility-1',
        device_type: 'Power Source',
        sub: [
          {
            device_id: '2',
            depth: 2,
            device_name: 'Transformer-PP-01',
            device_type: 'Transformer',
            sub: [
              {
                depth: 3,
                device_name: 'SW1',
                device_type: 'Switch Board',
                sub: [
                  {
                    depth: 4,
                    device_name: 'UPS-A',
                    device_type: 'Mission critical equipment',
                    sub: [
                      {
                        depth: 5,
                        device_name: 'BD-CA',
                        device_type: 'Riser',
                        sub: [
                          {
                            depth: 6,
                            device_name: 'Transformer-1',
                            device_type: 'Transformer',
                            sub: [
                              {
                                depth: 7,
                                device_name: 'DS-1',
                                device_type: 'Fused DS',
                                sub: [
                                  {
                                    depth: 8,
                                    device_name: 'STS-1',
                                    device_type: 'DP/STS',
                                    sub: [
                                      {
                                        depth: 9,
                                        device_name: 'PUD-1',
                                        device_type: 'PUD',
                                        sub: [
                                          {
                                            depth: 10,
                                            device_name: 'PP1-1',
                                            device_type: 'PP',
                                            sub: [
                                              {
                                                depth: 11,
                                                device_name: 'Breaker-1-1-1',
                                                device_type: 'Breaker',
                                              },
                                            ],
                                          },
                                          {
                                            depth: 10,
                                            device_name: 'PP1-2',
                                            device_type: 'PP'
                                          },
                                        ],
                                      },
                                    ],
                                  }
                                ],
                              }
                            ],
                          },
                        ],
                      }
                    ],
                  },
                ],
              },
              {
                depth: 10,
                device_name: 'PP1-1',
                device_type: 'PP'
              }
            ],
          },
        ],
      },
    ],
  },
];

Answer 1

用递归的方法可以解决

find (list, name) {
  let walker = function (array, label) {
    let going = false;
    array.forEach(item => {
      if (item['sub']) {
        let a = walker(item['sub'], label);
        if (a) {
          item.isEnable = false;
          going = true;
        } else if (item['device_name'].indexOf(label) !== -1 || label === '') {
          item.isEnable = false;
          going = true;
        } else {
          item.isEnable = true;
        }
      } else if (item['device_name'].indexOf(label) !== -1 || label === '') {
        item.isEnable = false;
        going = true;
      } else {
        item.isEnable = true;
      }
    });
    return going;
  }
  walker(list, name);
}