嵌套数组过滤器/映射答案

【问题标题】：Nested Array Filter/Mapping嵌套数组过滤器/映射
【发布时间】：2021-08-26 22:30:05
【问题描述】：

可能是一个基本问题，但我已经被阻止了一天。我正在尝试从以下数组中获取正确的 map/filter：

[{
    "id": 1,
    "description": "Electric",
    "subUtilityTypes": [{
        "id": 5,
        "description": "Grid"
      },
      {
        "id": 6,
        "description": "Solar"
      }
    ]
  },
  {
    "id": 2,
    "description": "Gas",
    "subUtilityTypes": [{
        "id": 7,
        "description": "Heating Oil"
      },
      {
        "id": 8,
        "description": "Natural Gas"
      },
      {
        "id": 11,
        "description": "Propane"
      }
    ]
  }
]

我想在所有subUtilityTypes 中获取id 和description。

这是我一直在尝试的：

this.options = arr1.map((parent) => {
  return {
    id: parent.id,
    name: parent.subUtilityTypes.flatMap((child) => {
      return child.description;
    })
  };
});

我正在尝试的问题是，我没有创建单独的对象，而是得到父 id 和这样的子名称列表：

[{
    "id": 1,
    "name": [
      "Grid",
      "Solar"
    ]
  },
  {
    "id": 2,
    "name": [
      "Heating Oil",
      "Natural Gas",
      "Propane"
    ]
  }
]

预期结果应如下所示：

[{
    "id": 5,
    "name": [
      "Grid"
    ]
  },
  {
    "id": 6,
    "name": [
      "Solar"
    ]
  },
  {
    "id": 7,
    "name": [
      "Heating Oil"
    ]
  }
]

【问题讨论】：

id 8 和 11 在预期结果中发生了什么？

标签： javascript arrays vue.js

【解决方案1】：

首先使用flatMap 获取subUtilityTypes，然后使用map 条目：

const input = [{id:1,description:"Electric",subUtilityTypes:[{id:5,description:"Grid"},{id:6,description:"Solar"}]},{id:2,description:"Gas",subUtilityTypes:[{id:7,description:"Heating Oil"},{id:8,description:"Natural Gas"},{id:11,description:"Propane"}]}];

const res = input.flatMap(e => e.subUtilityTypes)
                 .map(e => ({ id: e.id, name: [e.description] }))
                 
console.log(res)

.as-console-wrapper { max-height: 100% !important; top: 0; } /* ignore this */

【讨论】：

【解决方案2】：

通过仅返回 subUtilityTypes 仅映射 arr1，然后对其进行映射以获得所需的结果：

 arr1.flatMap(item=>item.subUtilityTypes)
       .map(item=>({id:item.id,name:[item.description]}))

let arr1=[
    {
        "id": 1,
        "description": "Electric",
        "subUtilityTypes": [
            {
                "id": 5,
                "description": "Grid"
            },
            {
                "id": 6,
                "description": "Solar"
            }
        ]
    },
    {
        "id": 2,
        "description": "Gas",
        "subUtilityTypes": [
            {
                "id": 7,
                "description": "Heating Oil"
            },
            {
                "id": 8,
                "description": "Natural Gas"
            },
            {
                "id": 11,
                "description": "Propane"
            }
        ]
    }
]

let options=arr1.flatMap(item=>item.subUtilityTypes).map(item=>({id:item.id,name:[item.description]}))

console.log(options)

【讨论】：

【解决方案3】：

您也可以使用reduce 来达到相同的效果。

arr.reduce((acc, curr) => [...acc,...curr.subUtilityTypes.map((o) => ({ id: o.id, name: [o.description] })),],[])

const arr = [
  {
    id: 1,
    description: "Electric",
    subUtilityTypes: [
      {
        id: 5,
        description: "Grid",
      },
      {
        id: 6,
        description: "Solar",
      },
    ],
  },
  {
    id: 2,
    description: "Gas",
    subUtilityTypes: [
      {
        id: 7,
        description: "Heating Oil",
      },
      {
        id: 8,
        description: "Natural Gas",
      },
      {
        id: 11,
        description: "Propane",
      },
    ],
  },
];

const result = arr.reduce((acc, curr) => [...acc,...curr.subUtilityTypes.map((o) => ({ id: o.id, name: [o.description] })),],[]);
console.log(result);

【讨论】：