首页 > 解决方案 > 使用 filter 和 groupby 映射 json 数组的值

问题描述

我的 json 如下所示。我正在尝试根据目标 id 等于 1083 的角色 id 对我的对象进行分组。

我的json:

[  {
    "id" :1,
    "role": {
      "id": "25",
    },
    "target": {
      "id": "1083",
    }
  },
    {
    "id" :2,
    "role": {
      "id": "25",
    },
    "target": {
      "id": "1083",
    }
  },
    {
    "id" :3,
    "role": {
      "id": "25",
    },
    "target": {
      "id": "1084",
    }
  },
  {
    "id" :4,
    "role": {
      "id": "3",
    },
    "target": {
      "id": "1083",
    }
  }
  ]

预期结果:

{
  "25" : [
  {
    "id": 1
    "role": {
      "id": "25",
    },
    "target": {
      "id": "1083",
    }
    },
       { "id": 2
    "role": {
      "id": "25",
    },
    "target": {
      "id": "1083",
    }
    }
  ],
  "3": [
    {
    "id" :4,
    "role": {
      "id": "3",
    },
    "target": {
      "id": "1083",
    }
  }]
}

所以对于我的结果 json,它按 25 和 3 分组。第三条记录在我的预期结果中不存在,因为它的目标 id 是 1084

我尝试过滤以仅获取目标 id 1083,但是当我尝试使用 grouby 时,出现错误

data.filter(o => { 
          return o.target.id === "1083"
        }) 

标签: ecmascript-6angular5lodash

解决方案


通过 lodashfiltergroupBy

var data = [{ "id": 1, "role": { "id": "25", }, "target": { "id": "1083", } }, { "id": 2, "role": { "id": "25", }, "target": { "id": "1083", } }, { "id": 3, "role": { "id": "25", }, "target": { "id": "1084", } }, { "id": 4, "role": { "id": "3", }, "target": { "id": "1083", } } ]

const groupIt = (targetId) => _.chain(data)
   .filter(x => x.target.id ===targetId)
   .groupBy('role.id')
   .value()

console.log(groupIt('1083'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

你可以在没有 lodash 的情况下通过filterthen达到同样的效果reduce

var data = [{ "id": 1, "role": { "id": "25", }, "target": { "id": "1083", } }, { "id": 2, "role": { "id": "25", }, "target": { "id": "1083", } }, { "id": 3, "role": { "id": "25", }, "target": { "id": "1084", } }, { "id": 4, "role": { "id": "3", }, "target": { "id": "1083", } } ]

const groupIt = (targetId) => data.filter(x => x.target.id === targetId)
   .reduce((r, c) => (r[c.role.id] = [...r[c.role.id] || [], c], r), {})

console.log(groupIt('1083'))


推荐阅读