JavaScript: from an array of objects of an array of objects, extract value of a property as array

Question

I have a JavaScript object array with the following structure:

somedata = { foo: { bar: [ { baz: [ { someprop: 'a' }, { someprop: 'b' }, { someprop: 'c' } ] }, { baz: [ { someprop: 'd' }, { someprop: 'e' }, { someprop: 'f' } ] } ] } }

I want to extract someprop field from this JavaScript object as an array ['a', 'b', 'c', 'd', 'e', 'f']

currently, this is my code logic to extract someprop field as an array:

const result = [] somedata.foo.bar.forEach(x => { x.baz.forEach(y => { result.push(y.someprop) }) }) console.log(result) // prints ["a", "b", "c", "d", "e", "f"]

i tried to make the code more reusable by creating a function:

function extractToArray(data, arr, prop) { let result = [] data.forEach(x => { x[arr].forEach(y => { result.push(y[prop]) }) }) return result; } console.log(extractToArray(somedata.foo.bar, 'baz', 'someprop'))

But is there a more concise, elegant, cleaner way to achieve this?

Note: possible duplicate covers an array of objects, but this is regarding an array of objects of an array of objects (so a simple map solution won't work).

You say a map solution won't work, but it will if you specifically point at the array reference, which is what you're doing currently anyway. — zfrisch
– zfrisch, Commented Jul 15, 2019 at 18:53
i meant to say "a simple map solution" won't work. here is a not-so-simple (imho) map solution that would work: somedata.foo.bar.map(i => i.baz).map(i => i.map(j => j.someprop)).flat() — kimbaudi
– kimbaudi, Commented Jul 15, 2019 at 18:56
@kimbaudi Your solution in your most recent comment seems very elegant to me. For the nested structure that you have, you can't really simplify any further. — Code-Apprentice
– Code-Apprentice, Commented Jul 15, 2019 at 19:00

str · Accepted Answer · 2019-07-15 18:58:07Z

You can use flatMap for that:

const somedata = {foo:{bar:[{baz:[{someprop:"a"},{someprop:"b"},{someprop:"c"}]},{baz:[{someprop:"d"},{someprop:"e"},{someprop:"f"}]}]}}; const result = somedata.foo.bar.flatMap(({baz}) => baz.map(({someprop}) => someprop)); console.log(result);

Note that not every current browser supports this yet, so you might want to use a polyfill.

awesome! this was the solution i was looking for (specifically using flatMap). also +1 for destructuring assignment. This is basically the same solution I ended up with: somedata.foo.bar.flatMap(i => i.baz).flatMap(i => i.someprop)

Nenad Vracar · Accepted Answer · 2019-07-15 18:54:45Z

You could create recursive function that will find your prop on any level and return array as a result.

const somedata = {"foo":{"bar":[{"baz":[{"someprop":"a"},{"someprop":"b"},{"someprop":"c"}]},{"baz":[{"someprop":"d"},{"someprop":"e"},{"someprop":"f"}]}]}} function get(data, prop) { const result = []; for (let i in data) { if (i == prop) result.push(data[prop]); if (typeof data[i] == 'object') result.push(...get(data[i], prop)) } return result; } console.log(get(somedata, 'someprop'))

For the object check, I'd advise looking at the constructor instead of doing typeof. A.e. data[i].constructor.name === "Object" the reason why is because many things(like Arrays) return truthy as an object if you're only looking at typeof.

trincot · Accepted Answer · 2019-07-15 19:09:15Z

A recursive function that does it in one functional expression:

const extractToArray = (data, prop) => Object(data) !== data ? [] : Object.values(data).flatMap(v => extractToArray(v, prop)) .concat(prop in data ? data[prop] : []); var somedata = {foo: {bar: [{baz: [{someprop: 'a'},{someprop: 'b'},{someprop: 'c'}]},{baz: [{someprop: 'd'},{someprop: 'e'},{someprop: 'f'}]}]}} console.log(extractToArray(somedata, "someprop"));

This is reusable in the sense that it also works when the property is not always present, or not always at the same depth within the data structure.

Slai · Accepted Answer · 2019-07-15 19:16:47Z

For others with similar question, I am adding a more generic (but possibly a bit less efficient) alternative using the JSON.parse reviver parameter

var arr = [], obj = {foo:{bar:[{baz:[{someprop:"a"},{someprop:"b"},{someprop:"c"}]},{baz:[{someprop:"d"},{someprop:"e"},{someprop:"f"}]}]}} JSON.parse(JSON.stringify(obj), (k, v) => k === 'someprop' && arr.push(v)) console.log(arr)

Collectives™ on Stack Overflow

JavaScript: from an array of objects of an array of objects, extract value of a property as array

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Linked

Related