How to realize Multi-level Array filtering by js

there is a multi-level array with a variable number of layers. If you want to type a keyword, you can traverse the entire array and then filter out the elements on the fuzzy match with name, while retaining its hierarchical structure.

do you have any good ideas for implementation? 

    //
    var treeNodeList=[
      {
        "name": "A",
        "children": [{
            "name": "-1",
            "children": [{
                "name": "-1-1",
                "children": [
                    {
                    "name": "-1-1-1",
                    "type": "true",
                    },
                    {
                    "name": "-1-1-3",
                    "type": "true",
                    }
                ]
            }]
        },
         {
        "name": "B",
        "children": [{
            "name": "-1",
            "children": [{
                "name": "-2-2",
                "children": [
                    {
                    "name": "-2-2-2",
                    "type": "true",
                    },
                    {
                    "name": "-2-2-1",
                    "type": "true",
                    }
                ]
            }]
        },
         {
        "name": "C",
        "children": [{
            "name": "-1",
            "children": [{
                "name": "-3-1",
                "children": [
                    {
                    "name": "-3-3-1",
                    "type": "true",
                    },
                    {
                    "name": "-3-3-2",
                    "type": "true",
                    }
                ]
            }]
        },
        ]    
        
  // 3 
   [
      {
        "name": "A",
        "children": [{
            "name": "-1",
            "children": [{
                "name": "-1-1",
                "children": [
                    {
                    "name": "-1-1-3",
                    "type": "true",
                    }
                ]
            }]
        },
         {
        "name": "C",
        "children": [{
            "name": "-1",
            "children": [{
                "name": "-3-1",
                "children": [
                    {
                    "name": "-3-3-1",
                    "type": "true",
                    },
                    {
                    "name": "-3-3-2",
                    "type": "true",
                    }
                ]
            }]
        },
        ]
        
    // A     
    [
      {
        "name": "A",
        "children": [{
            "name": "-1",
            "children": [{
                "name": "-1-1",
                "children": [
                    {
                    "name": "-1-1-1",
                    "type": "true",
                    },
                    {
                    "name": "-1-1-3",
                    "type": "true",
                    }
                ]
            }]
        }
        ]
Javascript vue.js
Sep.16,2021 
var treeNodeList = [{
        "name": "A",
        "children": [{
            "name": "-1",
            "children": [{
                "name": "-1-1",
                "children": [{
                        "name": "-1-1-1",
                        "type": "true",
                    },
                    {
                        "name": "-1-1-3",
                        "type": "true",
                    }
                ]
            }]
        }]
    },
    {
        "name": "B",
        "children": [{
            "name": "-1",
            "children": [{
                "name": "-2-2",
                "children": [{
                        "name": "-2-2-2",
                        "type": "true",
                    },
                    {
                        "name": "-2-2-1",
                        "type": "true",
                    }
                ]
            }]
        }]
    },
    {
        "name": "C",
        "children": [{
            "name": "-1",
            "children": [{
                "name": "-3-1",
                "children": [{
                        "name": "-3-3-1",
                        "type": "true",
                    },
                    {
                        "name": "-3-3-2",
                        "type": "true",
                    }
                ]
            }]
        }]
    }
]

var query = 'A';

var filterObj = function(item){
    if(item.name.indexOf(query) > -1) return true;
    if(item.hasOwnProperty("children")){
        item.children = item.children.filter(function(child){
            if(child.hasOwnProperty("type")){
                return child.name.indexOf(query) > -1;
            }else if(child.hasOwnProperty("children")){
                return filterObj(child);
            }
        })
        if(item.children.length > 0){
            return true;
        }
    }else{
        return child.name.indexOf(query) > -1;
    }
}
var filter = treeNodeList.filter(function(item){
    return filterObj(item);
});

console.log(JSON.stringify(filter));

I wrote a few lines of code, which passed the test and can be used for reference.

I have previously written a multidimensional array to specify a child flattening function 

/**
 * 
 * @param array              
 * @param childrenKeys         ['children']
 * @param flattenParent      
 * @param flattenParentKey   
 * @returns {Array}
 */
function arrayChildrenFlatten(array, {childrenKeys, flattenParent, flattenParentKey} = {}) {
  childrenKeys = childrenKeys || ['children'];
  flattenParent = flattenParent || [];
  flattenParentKey = flattenParentKey || 'flattenParent';
  const result = [];
  array.forEach(item => {
    const flattenItem = JSON.parse(JSON.stringify(item));
    flattenItem[flattenParentKey] = flattenParent;
    result.push(flattenItem);
    childrenKeys.forEach(key => {
      if (item[key] && Array.isArray(item[key])) {
        const children = arrayChildrenFlatten(item[key], {
          childrenKeys,
          flattenParent: [...flattenParent, item],
          flattenParentKey,
        });
        result.push(...children);
      }
    });
  });
  return result;
}

it is a traversal to filter the array after processing it with this function in advance. If it is adopted, rebuild the tree through flattenParentKey , because I don't need to write something that is not ready-made.

it's up to you to write it.

depth first traverses the tree, cutting off the non-matching leaf nodes, and the root node determines whether to retain it according to whether there are any leaf nodes and whether it is fuzzy matching itself. Fuzzy matching can be solved simply by string distance (cosine distance).

Previous: Why are there so many questions submitted in the second phase? why are they used in many places?

Next: Ask for help from the master, want to achieve a background is a four-color ball effect, but the middle text has been unable to display in accordance with the normal format excuse me how to change?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu