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
– Adam Boduch, Commented Jun 8, 2015 at 20:17

XDS · Accepted Answer · 2020-01-03 11:02:50Z

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 3, 2020 at 11:02

XDS

4,2944 gold badges43 silver badges72 bronze badges

answered Jun 9, 2015 at 3:17

Adam Boduch

11.2k3 gold badges32 silver badges38 bronze badges

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

5 Comments

Wtower Over a year ago

Excellent! For lodash v4.0 replace pluck with map.

Wtower Over a year ago

Also, I need to mention that unfortunately this is slower for small arrays than iterating.

XDS Over a year ago

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.

Abhijeet Over a year ago

You could use flattenDeep or flattenDepth

AkshayBandivadekar Over a year ago

This code does not work if we have 1 more nested child to find

Kiril · Accepted Answer · 2017-06-13 13:08:26Z

6

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;
}

edited Jun 13, 2017 at 13:08

answered Jun 9, 2015 at 7:01

Kiril

2,9731 gold badge35 silver badges41 bronze badges

2 Comments

Ashwin Over a year ago

It will return only one item. What if I need all the matching elements?

Kiril Over a year ago

@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).

Richard Ayotte · Accepted Answer · 2017-07-30 20:24:38Z

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, 2017 at 20:24

answered Jul 30, 2017 at 20:10

Richard Ayotte

5,0901 gold badge39 silver badges36 bronze badges

1 Comment

Sapnesh Naik Over a year ago

Great, this works as adviced!

Vengleab SO · Accepted Answer · 2021-09-01 14:52:09Z

0

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))

answered Sep 1, 2021 at 14:52

Vengleab SO

8165 silver badges14 bronze badges

Collectives™ on Stack Overflow

lodash property search in array and in nested child arrays

4 Answers 4

5 Comments

Update:

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Update:

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related