如何过滤/搜索多个子数组？

Question

I am working on a search function for a parent child structure with locations (city,suburb,street). I want to search for a street name and get the results but keeping the structure.

The array structure is like this:

const cities = [
  {
    name: 'city1', sublocations: [
      {
        name: 'suburb1', sublocations: [
          {name: 'street1'},
          {name: 'street2'},
          {name: 'street3'},
        ]
      }, {
        name: 'suburb2', sublocations: [
          {name: 'street1'},
          {name: 'street2'},
          {name: 'street3'},
        ]
      }
    ]
  }
];

When I search for street1 for example I want to get this:

const cities = [
  {
    name: 'city1', sublocations: [
      {
        name: 'suburb1', sublocations: [
          {name: 'street1'},
        ]
      }, {
        name: 'suburb2', sublocations: [
          {name: 'street1'},
        ]
      }
    ]
  }
];

I tried it with the array.filter function but it overwrites the data and when I remove the search string the rest of the array doesn't come back.

Answer 1

I think this snippet should do the trick :

 var cities = [ {name :'city1', sublocations:[ {name :'suburb1', sublocations:[ {name :'street1'}, {name :'street2'}, {name :'street3'}, ]}, {name :'suburb2', sublocations:[ {name :'street1'}, {name :'street2'}, {name :'street3'}, ]} ]} ]; let findStreet = function(streetName) { return cities.map(city=> ({...city, sublocations:city.sublocations.map(suburb=> ({...suburb, sublocations:suburb.sublocations.filter( street=>street.name===streetName ) }) )}) ) } console.log(findStreet("street1"));

Answer 2

If you need a bit more flexibility you could generalize the location type by adding a type key, eg:

{ type: 'city', name: 'city1', locations: [] }

And then use a recursive filter function to make a decision for each node in the tree, eg:

const filterTree = (nodes, childrenKey, selector) => {
  return nodes.filter(selector).map(node => {
    return node.hasOwnProperty(childrenKey)
      ? {...node, [childrenKey]: filterTree(node[childrenKey], childrenKey, selector)}
      : node;
  });
};

Example:

 const locations = [ { type: 'city', name: 'city1', locations: [ { type: 'suburb', name: 'suburb1', locations: [ { type: 'street', name: 'street1' }, { type: 'street', name: 'street2' }, { type: 'street', name: 'street3' }, ] }, { type: 'suburb', name: 'suburb2', locations: [ { type: 'street', name: 'street1' }, { type: 'street', name: 'street2' }, { type: 'street', name: 'street3' }, ] } ] } ]; const filterTree = (nodes, childrenKey, selector) => { return nodes.filter(selector).map(node => { return node.hasOwnProperty(childrenKey) ? {...node, [childrenKey]: filterTree(node[childrenKey], childrenKey, selector)} : node; }); }; // example const filtered = filterTree(locations, 'locations', ({type, name}) => { return type === 'city' // allow all cities || (type === 'suburb' && name === 'suburb2') // but only specific suburbs || (type === 'street' && name === 'street2') // and streets; }); console.log(filtered);