在嵌套的对象数组中使用过滤器

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.

Answer 1

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 ); 

Answer 2

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); 

Answer 3

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) 

Answer 4

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); 

Answer 5

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), []
);

Answer 6

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