将具有对象数组的对象展平并放入对象数组答案

【问题标题】：Flattening and object with an array of objects in to an array of objects将具有对象数组的对象展平并放入对象数组
【发布时间】：2022-12-06 06:49:50
【问题描述】：

我有一个 GraphQL 端点，它以以下格式返回数据（称为位置）；

[
    {
        "name": "Location 1",
        "description": "-",
        "state": "Georgia",
        "address": "Kennesaw, GA 30144",
        "services": {
            "nodes": [
                {
                    "id": "cG9zdDo0OQ==",
                    "name": "Window Cleaning",
                    "color": "#00A7E3"
                }
            ]
        },
    },
    {
        "name": "Location 2",
        "description": "-",
        "state": "California",
        "address": "Los Angeles, 90016",
        "services": {
            "nodes": [
                {
                    "id": "cG9zdDo1Mg==",
                    "name": "Large Project Waterproofing",
                    "color": "#00668A"
                },
                {
                    "id": "cG9zdDo1MA==",
                    "name": "Surfaces, Stone & Metal Refinishing",
                    "color": "#333333"
                },
                {
                    "id": "cG9zdDo0OQ==",
                    "name": "Window Cleaning",
                    "color": "#00A7E3"
                }
            ]
        },
    },
]

我想做的是“扁平化”它，以便服务成为对象数组并且节点不再存在。所以预期的结果是；

[
    {
        "name": "Location 1",
        "description": "-",
        "state": "Georgia",
        "address": "Kennesaw, GA 30144",
        "services": [
                {
                    "id": "cG9zdDo0OQ==",
                    "name": "Window Cleaning",
                    "color": "#00A7E3"
                }
        ]
    },
    {
        "name": "Location 2",
        "description": "-",
        "state": "California",
        "address": "Los Angeles, 90016",
        "services": [
                {
                    "id": "cG9zdDo1Mg==",
                    "name": "Large Project Waterproofing",
                    "color": "#00668A"
                },
                {
                    "id": "cG9zdDo1MA==",
                    "name": "Surfaces, Stone & Metal Refinishing",
                    "color": "#333333"
                },
                {
                    "id": "cG9zdDo0OQ==",
                    "name": "Window Cleaning",
                    "color": "#00A7E3"
                }
        ]
    },
]

我已经尝试过使用 array.map 方法来执行以下操作；

const locations = locations.map((location) =>
    location.services.nodes.map((service) => service)
);

【问题讨论】：

你不能让你的端点以正确的结构返回数据吗？

标签： javascript arrays

【解决方案1】：

将数组映射到一个新数组，其中 services.nodes 数组设置为 services

const newLocations = locations.map(({ services: { nodes }, ...location }) => ({
  ...location,
  services: nodes,
}));

const locations = [{"name":"Location 1","description":"-","state":"Georgia","address":"Kennesaw, GA 30144","services":{"nodes":[{"id":"cG9zdDo0OQ==","name":"Window Cleaning","color":"#00A7E3"}]}},{"name":"Location 2","description":"-","state":"California","address":"Los Angeles, 90016","services":{"nodes":[{"id":"cG9zdDo1Mg==","name":"Large Project Waterproofing","color":"#00668A"},{"id":"cG9zdDo1MA==","name":"Surfaces, Stone & Metal Refinishing","color":"#333333"},{"id":"cG9zdDo0OQ==","name":"Window Cleaning","color":"#00A7E3"}]}}];

const newLocations = locations.map(({ services: { nodes }, ...location }) => ({
  ...location,
  services: nodes,
}));

console.log(newLocations);

.as-console-wrapper { max-height: 100% !important; }

【讨论】：

快 10 秒 :)

【解决方案2】：

要展平数组中每个位置对象的服务属性，您可以在位置数组上使用 map 方法，并使用扩展运算符 (...) 从服务对象中提取节点数组并将其直接分配给服务位置对象的属性。

下面是一个示例，说明如何使用 map 方法和扩展运算符来展平数组中每个位置对象的服务属性：

const flattenedLocations = locations.map((location) => ({
  ...location,
  services: [...location.services.nodes],
}));

在此示例中，我们使用 map 方法迭代位置数组并创建一个新的具有扁平化服务属性的位置对象数组。对于每个位置对象，我们使用扩展运算符从服务对象中提取节点数组，并将其直接分配给位置对象的服务属性。这将创建一个新的位置对象数组，其 services 属性作为服务对象数组，没有 nodes 属性。

【讨论】：