Question

我希望有一个数组在checked属性上返回某些属性。

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
          }
        ]
      }
    ]

为什么我的代码不起作用？它是我用于检查或取消选中事件的功能

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

对于上述情况，我希望得到['my', 'redeem']。

Answer 1

为什么我的代码不起作用？这是我用来检查或使用的功能取消选中事件

因为filter返回数组而数组没有filterKey属性。

使用reduce，filter和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

<强>演示

＆＃13;

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

＆＃13;

Answer 2

您也可以尝试这样的事情。

逻辑

创建一个临时数组。（以下示例中的 async function REQ(url, attempts) { try { const res = await requestAsync(url); if (typeof res.body == "undefined" || res.body.length == 0) throw new Error("no response"); // or throw undefined to get the original behaviour return res; } catch(error) { if (attempts > ATTEMPT_THRESHOLD) throw error; ++attempts; await sleep(5000 * attempts); return REQ(url, attempts); } } ）。
循环acc，然后循环data
检查data[i].data是否属实，将checked值推至filterKey。

ES5版本：

＆＃13;

acc

＆＃13;

ES6版本：

＆＃13;

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

＆＃13;

Answer 3

您可以通过使用简单的javascript来实现这一点，这看起来很容易理解，并且您可以轻松编辑以便将来进行更改。虽然使用ECMA脚本或纯JavaScript时基于时间和空间的复杂性相同。只取决于速记码。

＆＃13;

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)

＆＃13;

Answer 4

使用 array.protoype.concat ， array.protoype.filter ， array.protoype.map 和传播<的解决方案/ em> ES6的运营商：

var href = jQuery('p.item-property').html(); var link = "<a href='"+href+"' target='_blank'>Click Here</a>"; jQuery('p.item-property').replaceWith(link);

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

更清洁的方式来实现同样的事情。

＆＃13;

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

＆＃13;

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

6 个答案:

逻辑