using filter in a nested array of object

Question

I want to have an array that return certain property base on the checked property.

const data = [
      {
        "param": "type",
        "id": 6,
        "data": [
          {
            "name": "Collect",
            "filterKey": "collect",
            "checked": false
          },
          {
            "name": "Redeem",
            "filterKey": "redeem",
            "checked": true
          }
        ]
      },
      {
        "param": "country",
        "id": 5,
        "data": [
          {
            "name": "Malaysia",
            "filterKey": "my",
            "checked": true
          },
          {
            "name": "Singapore",
            "filterKey": "sg",
            "checked": false
          }
        ]
      }
    ]

Why my code below doesn't work? It's a function I use for my check or uncheck event

const checkedKeys = data.map(o => {
        return o.data.filter(o2 => {
          return o2.checked === true
        }).filterKey
    })

I expect to get ['my', 'redeem'] for above case.

Whats your expected result ? What is data in your code ?

klugjo
– klugjo

2017-12-26 09:15:20 +00:00
Commented Dec 26, 2017 at 9:15 — klugjo
– klugjo, Commented Dec 26, 2017 at 9:15
@klugjo is the first block of code.

Casa Lim
– Casa Lim

2017-12-26 09:16:04 +00:00
Commented Dec 26, 2017 at 9:16 — Casa Lim
– Casa Lim, Commented Dec 26, 2017 at 9:16

Faly · Accepted Answer · 2017-12-26 09:29:56Z

2

A solution with array.protoype.concat, array.protoype.filter, array.protoype.map and spread operator of ES6:

var data = [ { "param": "type", "id": 6, "data": [{"name": "Collect", "filterKey": "collect", "checked": false }, {"name": "Redeem", "filterKey": "redeem", "checked": true }]}, {"param": "country","id": 5,"data": [{"name": "Malaysia","filterKey": "my","checked": true}, {"name": "Singapore","filterKey": "sg","checked": false}]}];

var result = [].concat(...data.map(o => o.data)).filter(d => d.checked).map(d => d.filterKey);
console.log(result);

edited Dec 26, 2017 at 9:29

answered Dec 26, 2017 at 9:22

Faly

13.4k2 gold badges21 silver badges39 bronze badges

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

Comments

gurvinder372 · Accepted Answer · 2017-12-26 09:19:09Z

2

Why my code below doesn't work? It's a function I use for my check or uncheck event

Because filter returns an array and that array won't have filterKey property.

Use reduce, filter and map

var output = data.reduce( ( a, b ) => //use reduce to accumulate all filtered values
            a.concat( b.data.filter( o2 =>  //filter by checked
                o2.checked ).map( o3 =>   // map to get only the filterKey property
                   o3.filterKey ) ) , []); //[] is the initial value of accumulator

Demo

var data = [
  {
    "param": "type",
    "id": 6,
    "data": [
      {
        "name": "Collect",
        "filterKey": "collect",
        "checked": false
      },
      {
        "name": "Redeem",
        "filterKey": "redeem",
        "checked": true
      }
    ]
  },
  {
    "param": "country",
    "id": 5,
    "data": [
      {
        "name": "Malaysia",
        "filterKey": "my",
        "checked": true
      },
      {
        "name": "Singapore",
        "filterKey": "sg",
        "checked": false
      }
    ]
  }
];

var output = data.reduce( (a,b) => a.concat( b.data.filter( o2 => o2.checked ).map( o3 => o3.filterKey ) ) , [])	;

console.log( output );

answered Dec 26, 2017 at 9:19

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

3 Comments

Casa Lim Over a year ago

the concat confused me, what's that for?

gurvinder372 Over a year ago

concat will concatenate output of one filter to another, since your filtering inner arrays.

Rajesh Dixit Over a year ago

This is an opinionated comment, but this is where ES6 reduces readability. Though nicely indented, I prefer using () => {} pattern and return manually.

Community · Accepted Answer · 2020-06-20 09:12:55Z

You can try something like this as well.

Logic

Create a temporary array. (acc in below example).
Loop over data and in turn loop over data[i].data
Check if checked is true, push filterKey value to acc.

ES5 Version:

var data = [ { "param": "type", "id": 6, "data": [ { "name": "Collect", "filterKey": "collect", "checked": false }, { "name": "Redeem", "filterKey": "redeem", "checked": true } ] }, { "param": "country", "id": 5, "data": [ { "name": "Malaysia", "filterKey": "my", "checked": true }, { "name": "Singapore", "filterKey": "sg", "checked": false } ] } ];

var result = data.reduce(function(acc, obj) {
  obj.data.forEach(function(curObj) {
    if (curObj.checked) {
      acc.push(curObj.filterKey)
    }
  })
  return acc;
}, [])
console.log(result);

ES6 Version:

var data = [ { "param": "type", "id": 6, "data": [ { "name": "Collect", "filterKey": "collect", "checked": false }, { "name": "Redeem", "filterKey": "redeem", "checked": true } ] }, { "param": "country", "id": 5, "data": [ { "name": "Malaysia", "filterKey": "my", "checked": true }, { "name": "Singapore", "filterKey": "sg", "checked": false } ] } ];

var result = data.reduce((acc, obj) => {
  obj.data.forEach(({filterKey, checked}) => {
    checked && acc.push(filterKey)
  })
  return acc;
}, [])
console.log(result);

Akshay Vijay Jain · Accepted Answer · 2017-12-26 10:02:03Z

1

Cleaner way to achieve same thing.

data.map(o => o.data) //gets dataArray
  .reduce((a, c) => a.concat(c), []) //concats array
  .filter(o => o.checked) // filters for checked= true
  .map(o => o.filterKey) //returns filter key

answered Dec 26, 2017 at 10:02

Akshay Vijay Jain

16.3k9 gold badges73 silver badges85 bronze badges

1 Comment

Edgar Quintero Over a year ago

Works, simple, well explained.

Ankit Agarwal · Accepted Answer · 2017-12-26 09:20:46Z

0

You can achieve this by using simple javascript too which is seemingly easy to understand and will you to edit easily for future changes. Although the complexity based on time and space is same when you use ECMA script or pure javascript. Just depends on shorthand codes.

var data = [
  {
    "param": "type",
    "id": 6,
    "data": [
      {
        "name": "Collect",
        "filterKey": "collect",
        "checked": false
      },
      {
        "name": "Redeem",
        "filterKey": "redeem",
        "checked": true
      }
    ]
  },
  {
    "param": "country",
    "id": 5,
    "data": [
      {
        "name": "Malaysia",
        "filterKey": "my",
        "checked": true
      },
      {
        "name": "Singapore",
        "filterKey": "sg",
        "checked": false
      }
    ]
  }
];

var checkedKeys = [];

data.forEach((dataItem)=>{
  dataItem.data.forEach((innerData)=>{
      if(innerData.checked){
        checkedKeys.push(innerData.filterKey);
      }
  });
});
console.log(checkedKeys)

answered Dec 26, 2017 at 9:20

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

3 Comments

Casa Lim Over a year ago

I use filter because in data the checked value can be false, if that's so remove the key from checkKeys array

Ankit Agarwal Over a year ago

The checkKeys array will always have keys that has checked property true in above code.

Casa Lim Over a year ago

that's the problem,I think you're missing to pull the element out of the array if the checked became false from true.

Tsvetan Ganev · Accepted Answer · 2017-12-26 09:28:44Z

0

data.map( // iterate over the top level list
  x => (
    x.data.filter( // select only the checked items from the nested `data` list
      y => y.checked
    ).map( // select only the `filterKey` property of the filtered items
      y => y.filterKey
    )
  )
).reduce( // flatten the end-result [['redeem'],['my']] -> ['redeem', 'my]
  (acc, prev) => acc.concat(prev), []
);

answered Dec 26, 2017 at 9:28

Tsvetan Ganev

8,9164 gold badges32 silver badges45 bronze badges

Collectives™ on Stack Overflow

using filter in a nested array of object

6 Answers 6

Comments

3 Comments

Logic

Comments

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

3 Comments

Logic

Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related