使用嵌套映射操作从数组返回对象

Question

以下查询将json数据转换为对象 - 第1级map（这里没问题 - 我希望结果是这样的）

const customerOptions = () => {
  return customersQuery.edges.map(({ node: { id, name } }) => {
    return { key: id, text: name, value: id };
  });
};

输出

但是，如果我使用嵌套的json操作迭代我的map数据，我将结果作为一个对象数组 - （这里我希望以与第一个相同的格式返回数据查询）

const departmentOptions = () => {
  return customersQuery.edges.map(({ node: { departments } }) => {
    return departments.map(({ id, name }) => {
      return { key: id, text: name, value: id };
    });
  });
};

我想要实现的是将第二级数组映射作为对象列表返回，这样最终结果就是40个对象的列表。

示例JSON

{
  "data": {
    "customersQuery": {
      "edges": [
        {
          "node": {
            "id": 20,
            "name": "Customer name 20",
            "departments": [
              {
                "id": 39,
                "name": "Department name 20"
              },
              {
                "id": 40,
                "name": "Department name 20"
              }
            ]
          }
        },
        {
          "node": {
            "id": 19,
            "name": "Customer name 19",
            "departments": [
              {
                "id": 37,
                "name": "Department name 19"
              },
              {
                "id": 38,
                "name": "Department name 19"
              }
            ]
          }
        },
        {
          "node": {
            "id": 18,
            "name": "Customer name 18",
            "departments": [
              {
                "id": 35,
                "name": "Department name 18"
              },
              {
                "id": 36,
                "name": "Department name 18"
              }
            ]
          }
        },
        {
          "node": {
            "id": 17,
            "name": "Customer name 17",
            "departments": [
              {
                "id": 33,
                "name": "Department name 17"
              },
              {
                "id": 34,
                "name": "Department name 17"
              }
            ]
          }
        },
        {
          "node": {
            "id": 16,
            "name": "Customer name 16",
            "departments": [
              {
                "id": 31,
                "name": "Department name 16"
              },
              {
                "id": 32,
                "name": "Department name 16"
              }
            ]
          }
        },
        {
          "node": {
            "id": 15,
            "name": "Customer name 15",
            "departments": [
              {
                "id": 29,
                "name": "Department name 15"
              },
              {
                "id": 30,
                "name": "Department name 15"
              }
            ]
          }
        },
        {
          "node": {
            "id": 14,
            "name": "Customer name 14",
            "departments": [
              {
                "id": 27,
                "name": "Department name 14"
              },
              {
                "id": 28,
                "name": "Department name 14"
              }
            ]
          }
        },
        {
          "node": {
            "id": 13,
            "name": "Customer name 13",
            "departments": [
              {
                "id": 25,
                "name": "Department name 13"
              },
              {
                "id": 26,
                "name": "Department name 13"
              }
            ]
          }
        },
        {
          "node": {
            "id": 12,
            "name": "Customer name 12",
            "departments": [
              {
                "id": 23,
                "name": "Department name 12"
              },
              {
                "id": 24,
                "name": "Department name 12"
              }
            ]
          }
        },
        {
          "node": {
            "id": 11,
            "name": "Customer name 11",
            "departments": [
              {
                "id": 21,
                "name": "Department name 11"
              },
              {
                "id": 22,
                "name": "Department name 11"
              }
            ]
          }
        },
        {
          "node": {
            "id": 10,
            "name": "Customer name 10",
            "departments": [
              {
                "id": 13,
                "name": "Department name 10"
              },
              {
                "id": 14,
                "name": "Department name 10"
              }
            ]
          }
        },
        {
          "node": {
            "id": 9,
            "name": "Customer name 9",
            "departments": [
              {
                "id": 11,
                "name": "Department name 9"
              },
              {
                "id": 12,
                "name": "Department name 9"
              }
            ]
          }
        },
        {
          "node": {
            "id": 8,
            "name": "Customer name 8",
            "departments": [
              {
                "id": 19,
                "name": "Department name 8"
              },
              {
                "id": 20,
                "name": "Department name 8"
              }
            ]
          }
        },
        {
          "node": {
            "id": 7,
            "name": "Customer name 7",
            "departments": [
              {
                "id": 15,
                "name": "Department name 7"
              },
              {
                "id": 16,
                "name": "Department name 7"
              }
            ]
          }
        },
        {
          "node": {
            "id": 6,
            "name": "Customer name 6",
            "departments": [
              {
                "id": 17,
                "name": "Department name 6"
              },
              {
                "id": 18,
                "name": "Department name 6"
              }
            ]
          }
        },
        {
          "node": {
            "id": 5,
            "name": "Customer name 5",
            "departments": [
              {
                "id": 9,
                "name": "Department name 5"
              },
              {
                "id": 10,
                "name": "Department name 5"
              }
            ]
          }
        },
        {
          "node": {
            "id": 4,
            "name": "Customer name 4",
            "departments": [
              {
                "id": 7,
                "name": "Department name 4"
              },
              {
                "id": 8,
                "name": "Department name 4"
              }
            ]
          }
        },
        {
          "node": {
            "id": 3,
            "name": "Customer name 3",
            "departments": [
              {
                "id": 5,
                "name": "Department name 3"
              },
              {
                "id": 6,
                "name": "Department name 3"
              }
            ]
          }
        },
        {
          "node": {
            "id": 2,
            "name": "Customer name 2",
            "departments": [
              {
                "id": 3,
                "name": "Department name 2"
              },
              {
                "id": 4,
                "name": "Department name 2"
              }
            ]
          }
        },
        {
          "node": {
            "id": 1,
            "name": "Customer name 1",
            "departments": [
              {
                "id": 1,
                "name": "Department name 1"
              },
              {
                "id": 2,
                "name": "Department name 1"
              }
            ]
          }
        }
      ]
    }
  }
}

作为参考，我的GraphQL查询看起来像

Answer 1

使用reduce和forEach将每个部门数据推送到数组。

const customersQuery = {"edges":[{"node":{"id":20,"name":"Customer name 20","departments":[{"id":39,"name":"Department name 20"},{"id":40,"name":"Department name 20"}]}},{"node":{"id":19,"name":"Customer name 19","departments":[{"id":37,"name":"Department name 19"},{"id":38,"name":"Department name 19"}]}},{"node":{"id":18,"name":"Customer name 18","departments":[{"id":35,"name":"Department name 18"},{"id":36,"name":"Department name 18"}]}},{"node":{"id":17,"name":"Customer name 17","departments":[{"id":33,"name":"Department name 17"},{"id":34,"name":"Department name 17"}]}},{"node":{"id":16,"name":"Customer name 16","departments":[{"id":31,"name":"Department name 16"},{"id":32,"name":"Department name 16"}]}},{"node":{"id":15,"name":"Customer name 15","departments":[{"id":29,"name":"Department name 15"},{"id":30,"name":"Department name 15"}]}},{"node":{"id":14,"name":"Customer name 14","departments":[{"id":27,"name":"Department name 14"},{"id":28,"name":"Department name 14"}]}},{"node":{"id":13,"name":"Customer name 13","departments":[{"id":25,"name":"Department name 13"},{"id":26,"name":"Department name 13"}]}},{"node":{"id":12,"name":"Customer name 12","departments":[{"id":23,"name":"Department name 12"},{"id":24,"name":"Department name 12"}]}},{"node":{"id":11,"name":"Customer name 11","departments":[{"id":21,"name":"Department name 11"},{"id":22,"name":"Department name 11"}]}},{"node":{"id":10,"name":"Customer name 10","departments":[{"id":13,"name":"Department name 10"},{"id":14,"name":"Department name 10"}]}},{"node":{"id":9,"name":"Customer name 9","departments":[{"id":11,"name":"Department name 9"},{"id":12,"name":"Department name 9"}]}},{"node":{"id":8,"name":"Customer name 8","departments":[{"id":19,"name":"Department name 8"},{"id":20,"name":"Department name 8"}]}},{"node":{"id":7,"name":"Customer name 7","departments":[{"id":15,"name":"Department name 7"},{"id":16,"name":"Department name 7"}]}},{"node":{"id":6,"name":"Customer name 6","departments":[{"id":17,"name":"Department name 6"},{"id":18,"name":"Department name 6"}]}},{"node":{"id":5,"name":"Customer name 5","departments":[{"id":9,"name":"Department name 5"},{"id":10,"name":"Department name 5"}]}},{"node":{"id":4,"name":"Customer name 4","departments":[{"id":7,"name":"Department name 4"},{"id":8,"name":"Department name 4"}]}},{"node":{"id":3,"name":"Customer name 3","departments":[{"id":5,"name":"Department name 3"},{"id":6,"name":"Department name 3"}]}},{"node":{"id":2,"name":"Customer name 2","departments":[{"id":3,"name":"Department name 2"},{"id":4,"name":"Department name 2"}]}},{"node":{"id":1,"name":"Customer name 1","departments":[{"id":1,"name":"Department name 1"},{"id":2,"name":"Department name 1"}]}}]};

const departmentOptions = () => {
  return customersQuery.edges.reduce((acc, { node: { departments } }) => {
    departments.forEach(({ id, name }) => {
      acc.push({ key: id, text: name, value: id });
    });
    
    return acc;
  }, []);
};

console.log(departmentOptions());

Answer 2

map不会更改数组长度，因为它适用于项目级别。您需要展平生成的数组。例如concat

const departmentOptions = () => {
  return [].concat.apply([], customersQuery.edges.map(({ node: { departments } }) => {
    return departments.map(({ id, name }) => {
      return { key: id, text: name, value: id };
    });
  }));
};

或使用传播

const departmentOptions = () => {
  return [].concat(...customersQuery.edges.map(({ node: { departments } }) => {
    return departments.map(({ id, name }) => {
      return { key: id, text: name, value: id };
    });
  }));
};

Answer 3

我会在reducer函数中使外部函数调用reduce()而不是map()和concat()或push.apply()内部map()：

使用concat()：

＆＃13;

＆＃13;

let customersQuery = {"edges":[{"node":{"id":20,"name":"Customer name 20","departments":[{"id":39,"name":"Department name 20"},{"id":40,"name":"Department name 20"}]}},{"node":{"id":19,"name":"Customer name 19","departments":[{"id":37,"name":"Department name 19"},{"id":38,"name":"Department name 19"}]}},{"node":{"id":18,"name":"Customer name 18","departments":[{"id":35,"name":"Department name 18"},{"id":36,"name":"Department name 18"}]}},{"node":{"id":17,"name":"Customer name 17","departments":[{"id":33,"name":"Department name 17"},{"id":34,"name":"Department name 17"}]}},{"node":{"id":16,"name":"Customer name 16","departments":[{"id":31,"name":"Department name 16"},{"id":32,"name":"Department name 16"}]}},{"node":{"id":15,"name":"Customer name 15","departments":[{"id":29,"name":"Department name 15"},{"id":30,"name":"Department name 15"}]}},{"node":{"id":14,"name":"Customer name 14","departments":[{"id":27,"name":"Department name 14"},{"id":28,"name":"Department name 14"}]}},{"node":{"id":13,"name":"Customer name 13","departments":[{"id":25,"name":"Department name 13"},{"id":26,"name":"Department name 13"}]}},{"node":{"id":12,"name":"Customer name 12","departments":[{"id":23,"name":"Department name 12"},{"id":24,"name":"Department name 12"}]}},{"node":{"id":11,"name":"Customer name 11","departments":[{"id":21,"name":"Department name 11"},{"id":22,"name":"Department name 11"}]}},{"node":{"id":10,"name":"Customer name 10","departments":[{"id":13,"name":"Department name 10"},{"id":14,"name":"Department name 10"}]}},{"node":{"id":9,"name":"Customer name 9","departments":[{"id":11,"name":"Department name 9"},{"id":12,"name":"Department name 9"}]}},{"node":{"id":8,"name":"Customer name 8","departments":[{"id":19,"name":"Department name 8"},{"id":20,"name":"Department name 8"}]}},{"node":{"id":7,"name":"Customer name 7","departments":[{"id":15,"name":"Department name 7"},{"id":16,"name":"Department name 7"}]}},{"node":{"id":6,"name":"Customer name 6","departments":[{"id":17,"name":"Department name 6"},{"id":18,"name":"Department name 6"}]}},{"node":{"id":5,"name":"Customer name 5","departments":[{"id":9,"name":"Department name 5"},{"id":10,"name":"Department name 5"}]}},{"node":{"id":4,"name":"Customer name 4","departments":[{"id":7,"name":"Department name 4"},{"id":8,"name":"Department name 4"}]}},{"node":{"id":3,"name":"Customer name 3","departments":[{"id":5,"name":"Department name 3"},{"id":6,"name":"Department name 3"}]}},{"node":{"id":2,"name":"Customer name 2","departments":[{"id":3,"name":"Department name 2"},{"id":4,"name":"Department name 2"}]}},{"node":{"id":1,"name":"Customer name 1","departments":[{"id":1,"name":"Department name 1"},{"id":2,"name":"Department name 1"}]}}]};

const departmentOptions = () => {
  return customersQuery.edges.reduce((result, { node: { departments } }) => {
    return result.concat(departments.map(({ id, name }) => {
      return { key: id, text: name, value: id };
    }));
  }, []);
};

console.log(departmentOptions());

＆＃13;

＆＃13;

＆＃13;

使用push.apply()：

＆＃13;

＆＃13;

let customersQuery = {"edges":[{"node":{"id":20,"name":"Customer name 20","departments":[{"id":39,"name":"Department name 20"},{"id":40,"name":"Department name 20"}]}},{"node":{"id":19,"name":"Customer name 19","departments":[{"id":37,"name":"Department name 19"},{"id":38,"name":"Department name 19"}]}},{"node":{"id":18,"name":"Customer name 18","departments":[{"id":35,"name":"Department name 18"},{"id":36,"name":"Department name 18"}]}},{"node":{"id":17,"name":"Customer name 17","departments":[{"id":33,"name":"Department name 17"},{"id":34,"name":"Department name 17"}]}},{"node":{"id":16,"name":"Customer name 16","departments":[{"id":31,"name":"Department name 16"},{"id":32,"name":"Department name 16"}]}},{"node":{"id":15,"name":"Customer name 15","departments":[{"id":29,"name":"Department name 15"},{"id":30,"name":"Department name 15"}]}},{"node":{"id":14,"name":"Customer name 14","departments":[{"id":27,"name":"Department name 14"},{"id":28,"name":"Department name 14"}]}},{"node":{"id":13,"name":"Customer name 13","departments":[{"id":25,"name":"Department name 13"},{"id":26,"name":"Department name 13"}]}},{"node":{"id":12,"name":"Customer name 12","departments":[{"id":23,"name":"Department name 12"},{"id":24,"name":"Department name 12"}]}},{"node":{"id":11,"name":"Customer name 11","departments":[{"id":21,"name":"Department name 11"},{"id":22,"name":"Department name 11"}]}},{"node":{"id":10,"name":"Customer name 10","departments":[{"id":13,"name":"Department name 10"},{"id":14,"name":"Department name 10"}]}},{"node":{"id":9,"name":"Customer name 9","departments":[{"id":11,"name":"Department name 9"},{"id":12,"name":"Department name 9"}]}},{"node":{"id":8,"name":"Customer name 8","departments":[{"id":19,"name":"Department name 8"},{"id":20,"name":"Department name 8"}]}},{"node":{"id":7,"name":"Customer name 7","departments":[{"id":15,"name":"Department name 7"},{"id":16,"name":"Department name 7"}]}},{"node":{"id":6,"name":"Customer name 6","departments":[{"id":17,"name":"Department name 6"},{"id":18,"name":"Department name 6"}]}},{"node":{"id":5,"name":"Customer name 5","departments":[{"id":9,"name":"Department name 5"},{"id":10,"name":"Department name 5"}]}},{"node":{"id":4,"name":"Customer name 4","departments":[{"id":7,"name":"Department name 4"},{"id":8,"name":"Department name 4"}]}},{"node":{"id":3,"name":"Customer name 3","departments":[{"id":5,"name":"Department name 3"},{"id":6,"name":"Department name 3"}]}},{"node":{"id":2,"name":"Customer name 2","departments":[{"id":3,"name":"Department name 2"},{"id":4,"name":"Department name 2"}]}},{"node":{"id":1,"name":"Customer name 1","departments":[{"id":1,"name":"Department name 1"},{"id":2,"name":"Department name 1"}]}}]};

const departmentOptions = () => {
  return customersQuery.edges.reduce((result, { node: { departments } }) => {
    result.push.apply(result, departments.map(({ id, name }) => {
      return { key: id, text: name, value: id };
    }));
    
    return result;
  }, []);
};

console.log(departmentOptions());

＆＃13;

＆＃13;

＆＃13;

如果内部数组非常大，

concat()会更好，因为它在每次将result数组中的数据复制到新数据时使用堆内存。

如果内部数组相对较小，

push.apply()会更好，因为它使用堆栈内存，并将数据附加到现有result数组的末尾，并且每次都不执行显式复制