使用 lodash 根据通用 ID 对 2 个数组的响应进行分组

Question

我有 2 个数组，一个包含组信息，另一个包含字段信息。我想组合这两个数组来创建正确的分组字段。

API 响应如下所示

{
  "type1": [
    {
      "groupId": "1",
      "fieldIds": [
        "field1",
        "field2"
      ]
    },
    {
      "groupId": "2",
      "fieldIds": [
        "field3"
      ]
    }
  ],
  "type2": [
    {
      "groupId": "3",
      "fieldIds": [
        "field4",
        "field5"
      ]
    },
    {
      "groupId": "4",
      "fieldIds": [
        "field3"
      ]
    }
  ],
  "fields": [
    {
      "fieldId": "field1",
      "fieldName": "FName1"
    }...
  ]
}

我想对字段进行分组，以便输出看起来像这样

{
  "type1": [
    {
      "groupId": "1",
      "fields": [
        {
          "fieldId": "field1",
          "fieldName": "FName1"
        },
        {
          "fieldId": "field2",
          "fieldName": "FName2"
        }
      ]
    },
    {
      "groupId": "2",
      "fields": [
        {
          "fieldId": "field3",
          "fieldName": "FName3"
        }
      ]
    }
  ],
  "type2": [
    {
      "groupId": "3",
      "fields": [
        {
          "fieldId": "field4",
          "fieldName": "FName4"
        },
        {
          "fieldId": "field5",
          "fieldName": "FName5"
        }
      ]
    }
  ]
}

我已经完成了“残酷”的方式，我遍历组，选择 fieldId，在 fields 数组中搜索该 fieldId，然后将其放在组下。 它有效，但我正在寻找一些“干净”的方法来做到这一点使用lodash链。

Answer 1

我的方法是按 id 对字段进行分组并创建一个查找对象，这样我就可以在 O(1) 中直接访问它。

然后将对象转换为条目数组，以便我可以迭代并用实际字段替换字段 id。之后转换回对象

首先我会给出非lodash

const {fields, ...types} = { "type1": [ { "groupId": "1", "fieldIds": [ "field1", "field2" ] }, { "groupId": "2", "fieldIds": [ "field3" ] } ], "type2": [ { "groupId": "3", "fieldIds": [ "field4", "field5" ] }, { "groupId": "4", "fieldIds": [ "field3" ] } ], "fields": [ { "fieldId": "field1", "fieldName": "FName1" }, { "fieldId": "field2", "fieldName": "FName2" }, { "fieldId": "field3", "fieldName": "FName3" }, { "fieldId": "field4", "fieldName": "FName4" }, { "fieldId": "field5", "fieldName": "FName5" } ] }

const groupedFields = fields.reduce((acc,curr) => {
  acc[curr.fieldId] = curr
  return acc
},{})

const result = Object.fromEntries(Object.entries(types).map(([k,v]) => {
  const newV = v.map(({groupId,fieldIds}) => {
    const fields = fieldIds.map(fieldId => groupedFields[fieldId])
    return {groupId,fields}
  })
  return [k,newV]  
}))

console.log(JSON.parse(JSON.stringify(result)))

lodash 解决方案

const {fields, ...types} = { "type1": [ { "groupId": "1", "fieldIds": [ "field1", "field2" ] }, { "groupId": "2", "fieldIds": [ "field3" ] } ], "type2": [ { "groupId": "3", "fieldIds": [ "field4", "field5" ] }, { "groupId": "4", "fieldIds": [ "field3" ] } ], "fields": [ { "fieldId": "field1", "fieldName": "FName1" }, { "fieldId": "field2", "fieldName": "FName2" }, { "fieldId": "field3", "fieldName": "FName3" }, { "fieldId": "field4", "fieldName": "FName4" }, { "fieldId": "field5", "fieldName": "FName5" } ] }

const groupedFields = _.groupBy(fields,'fieldId')

const result = _.mapValues(types, (value) => {
  return _.map(value, ({ groupId, fieldIds }) => ({
    groupId,
    fields: _.map(fieldIds, (fieldId) => groupedFields[fieldId][0]),
  }));
});

console.log(JSON.parse(JSON.stringify(result)))

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>