如何从嵌套数据结构中检索基于谓词/条件的特定属性值的平面数组？

Question

I have this array of objects

[{
  id: 1,
  checked: true,
  subChild: [{
    id: 11,
    checked: true
  }]
}, {
  id: 2,
  checked: true,
  subChild: [{
    id: 22,
    checked: false
  }]
}, {
  id: 3,
  checked: false,
  subChild: [{
    id: 33,
    checked: true
  }]
}]

Is there any lib to get an item's id value based on its checked property? I could iterate the data-structure by filter and find but it would be a lot of manual work; ... imagine I have another level of nested arrays of objects.

The expected output for the provided sample data is [1, 11, 2, 33] .

Answer 1

You could do a flatMap to bring subChild objects to the parent array, then filter based on checked property and do a final map to get the id s.

 const items = [ { id: 1, checked: true, subChild: [ { id: 11, checked: true, }, ], }, { id: 2, checked: true, subChild: [ { id: 22, checked: false, }, ], }, { id: 3, checked: false, subChild: [ { id: 33, checked: true, }, ], }, ]; let result = items .flatMap(({ subChild, ...item }) => [item, ...subChild]) .filter((item) => item.checked) .map((item) => item.id); console.log(result)

Answer 2

 const sampleData = [{ id: 1, checked: true, subChild: [{ id: 11, checked: true, subChild: [{ id: 111, checked: false, subChild: [{ id: 1111, checked: true, }], }, { id: 112, checked: true, subChild: [], }], }], }, { id: 2, checked: true, subChild: [{ id: 22, checked: false }], }, { id: 3, checked: false, subChild: [{ id: 33, checked: true }], }]; // 1. flatMap the items recursively const flatFunc = ({ subChild, ...item }) => [item].concat( Array.isArray(subChild) ? subChild.flatMap(flatFunc) : [] ); const flattenArray = sampleData.flatMap(flatFunc); // 2. filter and map to get the result const checkedIDs = flattenArray .filter(item => item.checked) .map(item => item.id); console.log({ checkedIDs, flattenArray });

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

Answer 3

I will do this way. Get the subChild arrays to the parent one. That's technically flattening the array in a custom way and then do a filter on this.

const subChildren = [];
const final = [
  ...arr.map(a => {
    subChildren.push(a.subChild);
    delete a.subChild;
    return a;
  }),
  ...subChildren.flat()
];

console.log(final);

Now that's the code that I'll make it even more better by using a filter.

final.filter(f => f.checked);

This will give me the array with objects. Now I just need to transform it to just id s.

final.filter(f => f.checked).map(f => f.id);

This will give me the required answer of:

[1, 2, 11, 33]

Here's the full snippet:

 const arr = [ { id: 1, checked: true, subChild: [ { id: 11, checked: true } ] }, { id: 2, checked: true, subChild: [ { id: 22, checked: false } ] }, { id: 3, checked: false, subChild: [ { id: 33, checked: true } ] } ]; const subChildren = []; const final = [ ...arr.map(a => { subChildren.push(a.subChild); delete a.subChild; return a; }), ...subChildren.flat() ]; console.log(final.filter(f => f.checked).map(f => f.id));

Answer 4

EDIT due to the OP's sentence ...

"imagine I have another level of nested array of object."

From my above comment ...

@AliciaY ... "imagine I have another level of nested array of object." ... Does the OP ask for a recursive approach which is capable of processing deeper nested structures of the form [{ id: 1, checked: true, subChild: [{ id: 11, checked: true, subChild: [{ id: 111, checked: true/*, subChild: [ ... ] */ }] }] } ?

This scenario/case gets covered best by a recursive implementation of my firstly (and now beneath) provided reduce and concat only approach.

 function collectCheckedItemIdRecursively( result, { id, checked, subChild = [] }, ) { return result.concat( (checked && id || []), subChild .reduce(collectCheckedItemIdRecursively, []) ); } const sampleData = [{ id: 1, checked: true, subChild: [{ id: 11, checked: true, subChild: [{ id: 111, checked: false, subChild: [{ id: 1111, checked: true, }], }, { id: 112, checked: true, subChild: [], }], }], }, { id: 2, checked: true, subChild: [{ id: 22, checked: false }], }, { id: 3, checked: false, subChild: [{ id: 33, checked: true }], }]; console.log( 'recursively implemented `reduce` and `concat` only approach ...', sampleData .reduce(collectCheckedItemIdRecursively, []) );

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

Edit ... for the 2 level nested data structure like provided originally by the OP, I leave my before provided approaches ...

OP's title/subject

shortcut to retrieve array of object property in javascript

There are no shortcuts but different approaches/strategies like ...

• reduce and concat only, but twice (once nested),

• reduce and concat with nested filter and map ,

• flatMap and flat with nested filter and map ,

• flatMap , filter and map with rest parameter syntax and spread syntax .

 const sampleData = [{ id: 1, checked: true, subChild: [{ id: 11, checked: true }], }, { id: 2, checked: true, subChild: [{ id: 22, checked: false }], }, { id: 3, checked: false, subChild: [{ id: 33, checked: true }], }]; console.log( 'nested `reduce` and `concat` twice ...', sampleData .reduce((result, { id, checked, subChild }) => result.concat( (checked && id || []), subChild .reduce((arr, { id, checked }) => arr.concat(checked && id || []), [] ) ), []) ); console.log( '`reduce` and `concat` with nested `filter` and `map` ...', sampleData .reduce((result, { id, checked, subChild }) => result.concat( (checked && id || []), subChild .filter(({ checked }) => checked) .map(({ id }) => id) ), []) ); console.log( '`flatMap` and `flat` with nested `filter` and `map` ...', sampleData .flatMap(({ id, checked, subChild }) => [ (checked && id || []), subChild .filter(({ checked }) => checked) .map(({ id }) => id) ].flat()) ); console.log( '`flatMap`, `filter` and `map` with rest parameter- and spread-syntax ...', sampleData .flatMap(({ subChild, ...rest }) => [rest, ...subChild]) .filter(({ checked }) => checked) .map(({ id }) => id) );

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

Answer 5

This should work for you !!!

 const array = [
  {
    id: 1,
    checked: true,
    subChild: [
      {
        id: 11,
        checked: true,
      },
    ],
  },
  {
    id: 2,
    checked: true,
    subChild: [
      {
        id: 22,
        checked: false,
      },
    ],
  },
  {
    id: 3,
    checked: false,
    subChild: [
      {
        id: 33,
        checked: true,
      },
    ],
  },
];

let result = array
  .flatMap(({ subChild, ...item }) => [item, ...subChild])
  .filter((item) => item.checked)
  .map((item) => item.id);