lodash property search in array and in nested child arrays

Question

I have this array:

[
    {
        id: 1,
        name: 'test 1',
        children: []
    },
    {
        id: 2,
        name: 'test 2',
        children: [
            {
                id: 4,
                name: 'test 4'
            }
        ]
    },
    {
        id: 3,
        name: 'test 3',
        children: []
    }
]

How can I filter by the id property in both this array and the nested children arrays?

For example, searching for id = 3, should return the test 3 object, and searching for id = 4 should return the test 4 object.

Is the nesting depth of the `children` arrays fixed to one level, or is it arbitrary? — Adam Boduch, Jun 08 '15 at 20:17

score 35 · Accepted Answer · edited Jan 03 '20 at 11:02

35

Using lodash, you can do something like this:

_(data)
    .thru(function(coll) {
        return _.union(coll, _.map(coll, 'children') || []);
    })
    .flatten()
    .find({ id: 4 });

Here, thru() is used to initialize the wrapped value. It's returning the union of the original array, and the nested children. This array structure is then flattened using flatten(), so you can find() the item.

edited Jan 03 '20 at 11:02

XDS

3,786
2
36
56

answered Jun 09 '15 at 03:17

Adam Boduch

11,023
3
30
38

5

Excellent! For lodash v4.0 replace `pluck` with `map`. – Wtower Oct 04 '16 at 00:31
Also, I need to mention that unfortunately this is slower for small arrays than iterating. – Wtower Oct 04 '16 at 00:44
2

Bare in mind that this implementation is going only one level deep. If your tree is more than one level deep it won't work as intended. – XDS Jan 03 '20 at 11:02
1

You could use flattenDeep or flattenDepth – Abhijeet Jan 05 '20 at 02:47
3

This code does not work if we have 1 more nested child to find – AkshayBandivadekar Dec 22 '20 at 17:38

Kiril · Answer 2 · 2017-06-13T13:08:26.770

That's a very simple tree traversal task. The easiest way to solve it is recursion (link to jsbin). It will work with any depth (with recursion limit of course) and it's one of the fastest ways with the worst complexity O(n):

function find(id, items) {
  var i = 0, found;

  for (; i < items.length; i++) {
    if (items[i].id === id) {
      return items[i];
    } else if (_.isArray(items[i].children)) {
      found = find(id, items[i].children);
      if (found) {
        return found;
      }
    }
  }
}

Update:

To find all matches - a slightly modified function (jsbin link above is updated):

function findAll(id, items) {
  var i = 0, found, result = [];

  for (; i < items.length; i++) {
    if (items[i].id === id) {
      result.push(items[i]);
    } else if (_.isArray(items[i].children)) {
      found = findAll(id, items[i].children);
      if (found.length) {
        result = result.concat(found);
      }
    }
  }

  return result;
}

It will return only one item. What if I need all the matching elements? — Ashwin, Jun 13 '17 at 09:31
@Ashwin, please see the update of the answer. But keep in mind that in case of `findAll` the whole tree would be analyzed (`find` would stop at the very first matching). — Kiril, Jun 13 '17 at 13:09

Richard Ayotte · Answer 3 · 2017-07-30T20:24:38.520

6

Another lodash option with children key and unlimited levels deep.

const flattenItems = (items, key) => {
    return items.reduce((flattenedItems, item) => {
        flattenedItems.push(item)
        if (Array.isArray(item[key])) {
            flattenedItems = flattenedItems.concat(flattenItems(item[key], key))
        }
        return flattenedItems
    }, [])
}

const item = find(flattenItems(items, 'children'), ['id', 4])

edited Jul 30 '17 at 20:24

answered Jul 30 '17 at 20:10

Richard Ayotte

5,021
1
36
34

Great, this works as adviced! – Sapnesh Naik Oct 15 '22 at 14:06

score 0 · Answer 4 · answered Sep 01 '21 at 14:52

You can achieve this by using pure javascript with ES6 syntax:

First you can flatten the array with .reduce function
Then you can use .find to search for id you want to find


const arr = [
  {
    id: 1,
    name: 'test 1',
    children: []
  },
  {
    id: 2,
    name: 'test 2',
    children: [
      {
        id: 4,
        name: 'test 4'
      }
    ]
  },
  {
    id: 3,
    name: 'test 3',
    children: []
  }
]

const flattenData = arr.reduce((newArr, arr) => {
  const {children, ...rest } = arr;
  newArr.push(rest);
  return newArr.concat(children)
}, [])


console.log(flattenData.find(d=>d.id===4))

lodash property search in array and in nested child arrays

4 Answers4

Update:

Linked