I have a dynamic array of objects which has an unlimited nested array of items in it like below:

var items = [{
  id: '7172hsdr',
  item: {},
  items: []
},
{
  id: '5343rtas',
  item: {},
  items: [{
    id: '4545nrhk',
    item: [],
    items: [{
      id: 'kbkb1212',
      item: [],
      items: []
    }]
  }]
}]

I want to search in this collection and find an object with id kbkb1212. I prefer to do it with lodash.

The problem is sometimes I look for an object with id of 7172hsdr, and sometimes I need kbkb1212 for instance.

What I've done

I have used below function which search the first level.

var item = _.find(items, { id: '7172hsdr' });

It works fine, but If I need kbkb1212 it does not.

I have a dynamic array of objects which has an unlimited nested array of items in it like below:

var items = [{
  id: '7172hsdr',
  item: {},
  items: []
},
{
  id: '5343rtas',
  item: {},
  items: [{
    id: '4545nrhk',
    item: [],
    items: [{
      id: 'kbkb1212',
      item: [],
      items: []
    }]
  }]
}]

I want to search in this collection and find an object with id kbkb1212. I prefer to do it with lodash.

The problem is sometimes I look for an object with id of 7172hsdr, and sometimes I need kbkb1212 for instance.

What I've done

I have used below function which search the first level.

var item = _.find(items, { id: '7172hsdr' });

It works fine, but If I need kbkb1212 it does not.

• javascript
• lodash

Share Improve this question Follow asked Feb 11, 2017 at 11:58 sadrzadehsinasadrzadehsina 1,3381515 silver badges2828 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

In plain Javascript you could use an interative and recursive approach for finding an item in a nested data structure.

function find(array, id) {
    var object;

    array.some(function f(a) {
        if (a.id === id) {
            object = a;
            return true;
        }
        if (Array.isArray(a.items)) {
            return a.items.some(f);
        }
    });
    return object;
}

var items = [{ id: '7172hsdr', item: {}, items: [] }, { id: '5343rtas', item: {}, items: [{ id: '4545nrhk', item: [], items: [{ id: 'kbkb1212', item: [], items: [] }] }] }];

console.log(find(items, '7172hsdr'));
console.log(find(items, 'kbkb1212'));

.as-console-wrapper { max-height: 100% !important; top: 0; }

It's not universal solution, but it works for your case

function deepFind(array, id) {
    return array.reduce(function(result, arrayItem) {
        if (result.length) return result;
        if (arrayItem.id === id) return result.concat([arrayItem]);

        return arrayItem.items.length ? deepFind(arrayItem.items, id) : result;
    }, [])
}


console.log('one', deepFind(items, 'kbkb1212')[0]);
console.log('two', deepFind(items, '7172hsdr')[0]);

https://jsfiddle/v8kpr83b/3/

Pure Javascript solution using a custom recursive function:

var items = [{ id: '7172hsdr', item: {}, items: [] }, { id: '5343rtas', item: {}, items: [{ id: '4545nrhk', item: [], items: [{ id: 'kbkb1212', item: [], items: [] }] }] }];

function getObjById(items, id) {
  var i = 0, o;
  for (i = 0, len = items.length; i < len; i++) {
      o = items[i];
      if (o['id'] && o.id == id) {
          return o;
      } else if (o['items'] && Array.isArray(o.items) && o.items.length){
          return getObjById(o.items, id);
      }
  }     
}

console.log(getObjById(items, 'kbkb1212'));
console.log(getObjById(items, '7172hsdr'));