javascript find child object in nested arrays

Question

I have a javascript structure like below (nested arrays of objects)

var categoryGroups = [
    {
        Id: 1, Categories: [
            { Id: 1 },
            { Id: 2 }, 
        ]

    },
    {
        Id: 2, Categories: [
            { Id: 100 },
            { Id: 200 },
        ]

    }
]

I want to find a child Category object matching an Id, assuming the Category Id's are all unique.

I've got this below, but was wondering if there is a more concise way of doing it:

var category, categoryGroup, found = false;
for (i = 0; i < categoryGroups.length ; i++) {
    categoryGroup = categoryGroups[i];
    for (j = 0; j < categoryGroup.Categories.length; j++) {
        category = categoryGroup.Categories[j];
        if (category.Id === id) {
            found = true;
            break;
        }
    }
    if (found) break;
}

I think there is a bug in your code. The condition if (category.Id === id) should actually be if (category.Id === categoryGroup.Id). Correct me if I am wrong — Raghu
– Raghu, Commented Mar 12, 2014 at 6:22
I'd recommend using a library like lodash or underscore. More specifically, look at the find method of lodash. — Vahe Khachikyan
– Vahe Khachikyan, Commented Mar 12, 2014 at 6:23
Lets say you want to find an item with id 100, do you want to get the output as { Id: 100 }? — thefourtheye
– thefourtheye, Commented Mar 12, 2014 at 6:25

mlienau · Accepted Answer · 2020-02-10 20:35:18Z

28

Using flatMap in ES2019

const category = categoryGroups.flatMap(cg => cg.Categories).find(c => c.Id === categoryId);

edited Feb 10, 2020 at 20:35

answered Feb 10, 2020 at 17:08

mlienau

8131 gold badge12 silver badges17 bronze badges

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

2 Comments

Jimmy Long Over a year ago

Awesome! I've been playing around with find, filter, map etc., but I couldn't get the data I needed from within nested obj, tried this and boom! magic!

Rakesh Over a year ago

Perfect!! This works well to retrieve the data from nested obj.

Ayush · Accepted Answer · 2014-03-13 06:28:38Z

13

Caveat: This uses a couple of Array.prototype functions that were only added in ECMAScript 5 and thus will not work with older browsers unless you polyfill them.

You can loop over all first-level objects in your array, and then filter the categories based on your condition and collect all matches in an array. Your final result will be the first element in the array of matches (no match found if array is empty).

var matches = [];
var needle = 100; // what to look for

arr.forEach(function(e) {
    matches = matches.concat(e.Categories.filter(function(c) {
        return (c.Id === needle);
    }));
});

console.log(matches[0] || "Not found");

JSFiddle: http://jsfiddle.net/b7ktf/1/

References:

Array.prototype.forEach
Array.prototype.concat
Array.prototype.filter

edited Mar 13, 2014 at 6:28

answered Mar 12, 2014 at 6:56

Ayush

42.5k52 gold badges169 silver badges243 bronze badges

Comments

Octavian Fedorovici · Accepted Answer · 2019-08-07 16:20:08Z

6

Using only Array.prototype.filter():

If you are sure that the id you are looking for exists, you can do:

var id = 200; // surely it exists
var category = arr.filter(g => g.Categories.filter(c => c.Id === id)[0])[0].Categories.filter(c => c.Id === id)[0];

If you are not sure that it exists:

var id = 201; // maybe it doesn't exist
var categoryGroup = arr.filter(e => e.Categories.filter(c => c.Id === id)[0])[0]; 
var category = categoryGroup ? categoryGroup.Categories.filter(c => c.Id === id)[0] : null;

jsfiddle

edited Aug 7, 2019 at 16:20

answered Aug 7, 2019 at 15:55

Octavian Fedorovici

1031 silver badge10 bronze badges

Comments

h0ly · Accepted Answer · 2019-02-19 09:56:12Z

2

Using reduce and recursion :

function nestedSearch(value) {
    return categoryGroups.reduce(function f(acc, val) {
        return (val.Id === value) ? val :
            (val.Categories && val.Categories.length) ? val.Categories.reduce(f, acc) : acc;
    });
}

> try on JSFiddle

edited Feb 19, 2019 at 9:56

answered Feb 19, 2019 at 9:43

h0ly

1611 silver badge8 bronze badges

Comments

The DIMM Reaper · Accepted Answer · 2020-05-20 16:49:48Z

2

If you want to actually return the inner category (instead of just checking for it's presence) you can use reduce:

return categoryGroups.reduce((prev, curr) => {
    //for each group: if we already found the category, we return that. otherwise we try to find it within this group
    return prev || curr.Categories.find(category => category.Id === id);
}, undefined);

This short-circuits on the inner categories, and touches each categoryGroup once. It could be modified to short-cicuit on the categoryGroups as well.

Here's a JS Fiddle demonstration.

answered May 20, 2020 at 16:49

The DIMM Reaper

3,7183 gold badges31 silver badges49 bronze badges

1 Comment

Cameron Wilby Over a year ago

Clever! This is the best "native" approach with only one line of indentation. Interesting that undefined is required otherwise initialValue defaults to the first element of the array.

A J · Accepted Answer · 2014-03-12 06:34:16Z

1

check the code in the fiddle

var categoryGroups = [
    {
        Id: 1, Categories: [
            { Id: 1 },
            { Id: 2 }, 
        ]

    },
    {
        Id: 2, Categories: [
            { Id: 100 },
            { Id: 200 },
        ]

    }
]
var id = 100;
var x = 'not found';
var category, categoryGroup, found = false;
for (i = 0; i < categoryGroups.length ; i++) {
    categoryGroup = categoryGroups[i];
    for (j = 0; j < categoryGroup.Categories.length; j++) {
        category = categoryGroup.Categories[j];
        if (category.Id == id) {
            var x = category.Id;
            found = true;
            break;
        }
    }
    if (found) break;
}
alert(x);

The above code checks if id = 100 is found in the array. If found will alert the value else alerts that its not found. value '100' has been hardcoded for the sake of demo

answered Mar 12, 2014 at 6:34

A J

2,14015 silver badges24 bronze badges

4 Comments

Raghu Over a year ago

Can you explain why you have set the id = 100?

A J Over a year ago

@Raghu : instead of an input i just hardcoded the value to be checked .. that has to be replaced by the value to b checked as per requirement

Raghu Over a year ago

got it. would have been great if you could create a function to make it mor e clearer. something like function getCategory(groups, id)

A J Over a year ago

@Raghu : Thanks .. but I just wanted to respond fast to the post.

Ja͢ck · Accepted Answer · 2014-03-12 06:38:24Z

1

You could wrap it inside a function to get rid of the awkward break; syntax and you can load each element into a variable inside the for(;;) construct to shave off a few lines.

function subCategoryExists(groups, id)
{
  for (var i = 0, group; group = groups[i]; ++i) {
    for (var k = 0, category; category = group.Categories[k]; ++k) {
      if (category.Id == id) {
        return true;
      }
    }
  }
  return false;
}

var found = subCategoryExists(categoryGroups, 100);

answered Mar 12, 2014 at 6:38

Ja͢ck

174k39 gold badges269 silver badges316 bronze badges

3 Comments

Sahil Babbar Over a year ago

This piece of code will not work, if the nesting increases to multiple levels. Thus, it's not scalable.

Ja͢ck Over a year ago

@SahilBabbar okay, but why did you only leave that comment on this answer?

Ja͢ck Over a year ago

@AnzilkhaN yeah, you may need a recursive approach if you want to traverse to unknown depths

Jon Schneider · Accepted Answer · 2018-03-14 18:17:28Z

1

Easy way using lodash library of NodeJS (assuming you are using NodeJS):

const _ = require('lodash');
let category ;
let categoryGroup = _.find(categoryGroups, (element)=>{
  category = _.find(element.Categories, {Id : 100});
  return category;
});

console.log(categoryGroup); // The category group which has the sub category you are looking for
console.log(category); // The exact category you are looking for

edited Mar 14, 2018 at 18:17

Jon Schneider

27.2k25 gold badges158 silver badges183 bronze badges

answered May 4, 2017 at 14:15

Mustafa Mamun

2,6512 gold badges17 silver badges18 bronze badges

Comments

Laurent Perrin · Accepted Answer · 2014-03-12 08:20:50Z

0

You could use underscore:

var cat = _(categoryGroups).
  chain().
  pluck('Categories').
  flatten().
  findWhere({Id: 2}).
  value();

What I'm doing here is that I'm extracting all Categories values in a single array and then grepping for the correct categories.

EDIT: sorry, didn't get your question right the first time. As the comments suggest, you might not want to use underscore just for that, but that's how I would do it :)

edited Mar 12, 2014 at 8:20

answered Mar 12, 2014 at 6:26

Laurent Perrin

14.9k5 gold badges53 silver badges49 bronze badges

5 Comments

Mulan Over a year ago

I think he wants to find by category id

Raghu Over a year ago

what if my project doesnt want to use underscore? His question is pretty clear he wants the optimization done in native javascript.

Mulan Over a year ago

@Raghu, yeah, i wouldn't add underscore for this one task unless you're already using it.

Ayush Over a year ago

Maybe underscore isn't a good fit for your project, but this is a great option for those who don't mind adding underscore.

Ayush Over a year ago

No, but it gives enough information that anyone familiar with JS can extend it to peek one level deeper.

vincent · Accepted Answer · 2021-01-18 03:11:35Z

We are using object-scan for our data processing now. It's very powerful once you wrap your head around it. For your questions this would look like this:

// const objectScan = require('object-scan');

const lookup = (id, data) => objectScan(['Categories.Id'], {
  useArraySelector: false,
  abort: true,
  rtn: 'parent',
  filterFn: ({ value }) => value === id
})(data);

const categoryGroups = [{ Id: 1, Categories: [{ Id: 1 }, { Id: 2 }] }, { Id: 2, Categories: [{ Id: 100 }, { Id: 200 }] }];

console.log(lookup(1, categoryGroups));
// => { Id: 1 }
console.log(lookup(100, categoryGroups));
// => { Id: 100 }
console.log(lookup(999, categoryGroups));
// => undefined

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

<script src="https://bundle.run/[email protected]"></script>

Disclaimer: I'm the author of object-scan

Collectives™ on Stack Overflow

javascript find child object in nested arrays

10 Answers 10

2 Comments

Comments

Comments

Comments

1 Comment

4 Comments

3 Comments

Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

2 Comments

Comments

Comments

Comments

1 Comment

4 Comments

3 Comments

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related