Find multiple elements in nested array

Question

I Need to find multiple elements in a nested array and return it as an array.

I use the reduce function to find the elements, but it returns only one record.

Nested array:

{
    "type": "group",
    "level": 0,
    "expand": "-closed",
    "selected": false,
    "text": "Федулов Владислав Владиславович",
    "phoneNumber": "+7 (927) 999 9999",
    "email": "[email protected]",
    "id": 24,
    "parent": null,
    "cardType": 0,
    "childrens": [
      {
        "type": "group",
        "level": 1,
        "expand": "-closed",
        "selected": false,
        "text": "Ширяев Феликс Богуславович",
        "phoneNumber": "+7 (123) 456 7810",
        "email": "[email protected]",
        "id": 47,
        "parent": 24,
        "cardType": 0,
        "childrens": [
          {
            "type": "manager",
            "level": 2,
            "expand": "-empty",
            "selected": false,
            "text": "Колесова Анастасия Олеговна",
            "phoneNumber": "+7 (900) 000 0001",
            "email": "[email protected]",
            "id": 58,
            "parent": 47,
            "cardType": 0,
            "childrens": null
          }
        ]
      }
    ]
  },
  {
    "type": "group",
    "level": 0,
    "expand": "-closed",
    "selected": false,
    "text": "Игнатьева Женевьева Павловна",
    "phoneNumber": "+7 (777) 777 7777",
    "email": "[email protected]",
    "id": 3,
    "parent": null,
    "cardType": 0,
    "childrens": [
      {
        "type": "group",
        "level": 1,
        "expand": "-closed",
        "selected": false,
        "text": "Меретин Викентий Васильевич",
        "phoneNumber": "+7 (917) 193 5222",
        "email": "[email protected]",
        "id": 2,
        "parent": 3,
        "cardType": 1,
        "childrens": [
          {
            "type": "manager",
            "level": 2,
            "expand": "-empty",
            "selected": false,
            "text": "Климаков Алексей Александрович",
            "phoneNumber": "+7 (903) 888 8888",
            "email": "[email protected]",
            "id": 20,
            "parent": 2,
            "cardType": 1,
            "childrens": null
          }
        ]
      }
    ]
  }

and the reduce function:

    var array = store.managersTree.treeNodes;
    var items = [];

    const findItemNested = (arr, searchString, nestingKey) => (
    arr.reduce((a, item) => {
         if (a) return a;
         if (item.text.indexOf(searchString)!==-1 || 
             item.phoneNumber.indexOf(searchString)!==-1 || 
             item.email.indexOf(searchString)!==-1) return item;
         if (item[nestingKey]) return findItemNested(item[nestingKey], 
       searchString, nestingKey)
    }, [])
    );

    const element = findItemNested(array, searchString, "childrens");

I am trying to find a record matching at least one criteria, expecting that reduce returns multiple records, but this returns only one record, despite there were multiple records found.

Any help would be appreciated.

UPD: searchString could be string like phoneNumber, text or email

Please add the output for a sample searchString. Not sure if you want objects from the nested childrens included as separate items in the output or just the objects from the main array — adiga
– adiga, Commented Jun 4, 2019 at 6:08
No, I got that the searchString could either of those 3 fields by checking the code. Just wanted an output for a sample searchString. Like what would be the output for findItemNested(array, "@gmail.com", "childrens") Anyway I have added an answer — adiga
– adiga, Commented Jun 4, 2019 at 7:04

adiga · Accepted Answer · 2019-06-04 07:27:49Z

3

You could reduce the array recursively.

Destructure the object in reduce parameter to get nestingKey and other properties separately
Create an array of filterKeys which have the keys which you want to search for searchString.
Use some to check if any of the fields in the object have a value which includes the searchString.
If nestingKey exists, you can push the nested items to the accumulator array.

const input=[{"type":"group","level":0,"expand":"-closed","selected":false,"text":"Федулов Владислав Владиславович","phoneNumber":"+7 (927) 999 9999","email":"[email protected]","id":24,"parent":null,"cardType":0,"childrens":[{"type":"group","level":1,"expand":"-closed","selected":false,"text":"Ширяев Феликс Богуславович","phoneNumber":"+7 (123) 456 7810","email":"[email protected]","id":47,"parent":24,"cardType":0,"childrens":[{"type":"manager","level":2,"expand":"-empty","selected":false,"text":"Колесова Анастасия Олеговна","phoneNumber":"+7 (900) 000 0001","email":"[email protected]","id":58,"parent":47,"cardType":0,"childrens":null}]}]},{"type":"group","level":0,"expand":"-closed","selected":false,"text":"Игнатьева Женевьева Павловна","phoneNumber":"+7 (777) 777 7777","email":"[email protected]","id":3,"parent":null,"cardType":0,"childrens":[{"type":"group","level":1,"expand":"-closed","selected":false,"text":"Меретин Викентий Васильевич","phoneNumber":"+7 (917) 193 5222","email":"[email protected]","id":2,"parent":3,"cardType":1,"childrens":[{"type":"manager","level":2,"expand":"-empty","selected":false,"text":"Климаков Алексей Александрович","phoneNumber":"+7 (903) 888 8888","email":"[email protected]","id":20,"parent":2,"cardType":1,"childrens":null}]}]}],
    filterKeys = ["text", "phoneNumber", "email"];

function findItemNested(array, searchString, nestingKey) {
  return array.reduce((acc, { [nestingKey]: nested, ...o }) => {
    if (filterKeys.some(k => o[k] && o[k].includes(searchString)))
      acc.push(o)
      
    if (nested)
      acc.push(...findItemNested(nested, searchString, nestingKey)) 
      
    return acc;
  }, [])
}

console.log(findItemNested(input, "keshman", "childrens"))
console.log(findItemNested(input, "@gmail.com", "childrens"))

edited Jun 4, 2019 at 7:27

answered Jun 4, 2019 at 6:25

adiga

35.4k9 gold badges65 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Nastya Keller Over a year ago

exactly what i looking for. Now it return matched records with children. Can i filter it to only matched, without children?

adiga Over a year ago

@NastyaKeller updated. You can destructure the nestingKey out in the parameter and put the remaining properties in o. Now o will have every property but childrens. And, use nested variable in the if condition if(nested)

Nastya Keller Over a year ago

thank you so much! one more question - what means dots in this line acc.push(...findItemNested(nested, searchString, nestingKey))

adiga Over a year ago

@NastyaKeller that's spread syntax. Since the recursive call to findItemNested returns an array, if you push it to the accumulator, it will create a 2D array. Let's say: var a = [1]; var b = [2, 3] If you do a.push(b), it creates [1, [2, 3]]. So, you need to spread the array. a.push(...b) is similar to a.push(2, 3).

adiga Over a year ago

@NastyaKeller alternatively, you could do acc = acc.concat(findItemNested(..)) if it's too confusing

|

Prince Devadoss · Accepted Answer · 2019-06-04 05:55:59Z

0

Always Array.reduce returns a single value after processing each element in the array. If you want to return matching records in array then you can use, Array.filter,

[1,2,3,4,5].filter((element) => {
    return (element === 2 || element ===4);
});

For this above code, the filtered array will be,

[2,4]

And before filter you should either flat the array or should traverse each and every element to filter the array instead of using Array.filter()

answered Jun 4, 2019 at 5:55

Prince Devadoss

4263 silver badges6 bronze badges

2 Comments

iplus26 Over a year ago

It's Array.prototype.filter, there's no Array.filter. It's different

Prince Devadoss Over a year ago

Sorry missed prototype there!

Prince Devadoss · Accepted Answer · 2019-06-04 10:26:57Z

Without reduce also its possible,

var s = [{
    "type": "group",
    "level": 0,
    "expand": "-closed",
    "selected": false,
    "text": "Федулов Владислав Владиславович",
    "phoneNumber": "+7 (927) 999 9999",
    "email": "[email protected]",
    "id": 24,
    "parent": null,
    "cardType": 0,
    "childrens": [
      {
        "type": "group",
        "level": 1,
        "expand": "-closed",
        "selected": false,
        "text": "Ширяев Феликс Богуславович",
        "phoneNumber": "+7 (123) 456 7810",
        "email": "[email protected]",
        "id": 47,
        "parent": 24,
        "cardType": 0,
        "childrens": [
          {
            "type": "manager",
            "level": 2,
            "expand": "-empty",
            "selected": false,
            "text": "Колесова Анастасия Олеговна",
            "phoneNumber": "+7 (900) 000 0001",
            "email": "[email protected]",
            "id": 58,
            "parent": 47,
            "cardType": 0,
            "childrens": null
          },
          {
            "type": "group",
            "level": 2,
            "expand": "-empty",
            "selected": false,
            "text": "Колесова Анастасия Олеговна",
            "phoneNumber": "+7 (900) 000 0001",
            "email": "[email protected]",
            "id": 534,
            "parent": 47,
            "cardType": 0,
            "childrens": null
          },
          {
            "type": "manager",
            "level": 2,
            "expand": "-empty",
            "selected": false,
            "text": "Колесова Анастасия Олеговна",
            "phoneNumber": "+7 (900) 000 0001",
            "email": "[email protected]",
            "id": 523,
            "parent": 47,
            "cardType": 0,
            "childrens": null
          }
        ]
      }
    ]
  },
  {
    "type": "manager",
    "level": 0,
    "expand": "-closed",
    "selected": false,
    "text": "Игнатьева Женевьева Павловна",
    "phoneNumber": "+7 (777) 777 7777",
    "email": "[email protected]",
    "id": 3,
    "parent": null,
    "cardType": 0,
    "childrens": [
      {
        "type": "group",
        "level": 1,
        "expand": "-closed",
        "selected": false,
        "text": "Меретин Викентий Васильевич",
        "phoneNumber": "+7 (917) 193 5222",
        "email": "[email protected]",
        "id": 2,
        "parent": 3,
        "cardType": 1,
        "childrens": [
          {
            "type": "manager",
            "level": 2,
            "expand": "-empty",
            "selected": false,
            "text": "Климаков Алексей Александрович",
            "phoneNumber": "+7 (903) 888 8888",
            "email": "[email protected]",
            "id": 20,
            "parent": 2,
            "cardType": 1,
            "childrens": null
          }
        ]
      }
    ]
  }];

  function filterRequiredElement(arr, searchString, nestingKey) {
      arr.forEach((item, index) => {
          if (item.type !== searchString || item.phoneNumber !== searchString || item.email !== searchString) {
             arr.splice(index, 1);
          }
      });
      for(let item of arr) {
          if (item[nestingKey] !== null) {
              filterRequiredElement(item[nestingKey], searchString, nestingKey);
          }
      }
  }

  filterRequiredElement(s ,'Климаков Алексей Александрович', 'childrens');
  console.log(s);

Collectives™ on Stack Overflow

Find multiple elements in nested array

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related