javascript - 使用嵌套映射操作从数组返回对象-6ren

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

转载作者：行者123 更新时间：2023-11-30 11:35:26

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

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

输出

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

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 查询的样子

最佳答案

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

使用`concat()`:

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());

使用`push.apply()`:

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());

如果您的内部数组非常大，

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

如果您的内部数组相对较小，

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

关于javascript - 使用嵌套映射操作从数组返回对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44654080/

文章推荐： ios - 查看动画有时会在零时间内执行

文章推荐： java - 无法在我的 JSP 中查看 ActionMessages 以及验证问题

c++ - 映射/设置迭代器不是可取消引用的 C++ 映射
请看一下我的代码。 int main () { Program* allcommand = new Program; allcommand->addCommand("add", new
c++ - typedef 映射、for 循环调试断言、映射/设置不兼容
因此，当我遇到调试断言时，我正在编写代码。现在我很想知道为什么这段代码不起作用: for(Model::MeshMap::iterator it = obj1->GetMeshes().begin()
java - 组、收集器、映射(整数到字符串)、映射(映射到对象)
这是我上一个问题的延续 Group, Sum byType then get diff using Java streams . 按照建议，我应该作为单独的线程发布，而不是更新原始线程。因此，通过我
javascript - JQuery 映射 vs Javascript 映射 vs For 循环
我正在实现一些非常适合 map 的代码。但是，我要迭代的列表中有大量对象，所以我的问题是哪种方法是解决此问题的最佳方法: var stuff = $.map(listOfMyObjects, some
不同类成员函数指针的C++映射
我正在尝试创建一个包含不同类的成员函数指针的映射。成员函数都具有相同的签名。为了做到这一点，我所有的类都继承了一个 Object 类，它只有默认构造函数、虚拟析构函数和一个虚拟 ToString()
具有相同键类型和不同项目类型的c++映射
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: how do you make a heterogeneous boost::map? 有可能在 C++ 中
Mysql WHERE IN 映射
我有一个 Mysql 查询，请检查以下内容: SELECT `tbl_classSubjects`.`classID` , `tbl_classSubjects`.`sectionID` , `tbl
JNA直接与接口(interface)映射？
抱歉，这可能是一个基本问题。 JNA直接映射和接口(interface)映射有什么区别？我的解释是否正确: 直接映射 : 直接使用库对象(如 Java 中的静态 main) 接口(interface
以部分函数为值的 Scala 映射
在 Twitter's Scala school collections section ，它们显示了一个带有偏函数作为值的 Map: // timesTwo() was defined earlie
FFMPEG channel 映射
很难说出这里问的是什么。这个问题是模棱两可的、模糊的、不完整的、过于宽泛的或修辞的，无法以目前的形式得到合理的回答。如需帮助澄清这个问题以便重新打开它，visit the help center .
具有原始类型值类型的 Scala 映射
据我了解，从 scala stdlib 声明一个映射并没有将其专门用于原始类型。我要的不是付出装箱/拆箱的代价，而是同时拥有scala map 的接口(interface)。一个明显的选择是使用 tr
没有键路径的数组的 Restkit 映射
如何为这样的 JSON 响应创建对象映射，它只是一个整数数组: [ 565195, 565309, 565261, 565515, 565292, 565281, 566346, 5
NHibernate DTO 映射
是否可以为 DTO 对象创建映射然后查询它们而不是域？如果不解释为什么？如果我需要几个 dtos 怎么办？ DTos 是只读的 ID 由 NH 自动生成将来这些 dtos 将设置映射到链接的 d
包含混合类型值的 Scala 映射
我有一个返回的函数(常规代码) [words: "one two", row: 23, col: 45] 在 Scala 中，我将上面更改为 Scala Map，但随后我被迫将其声明为 Map[Str
python - 映射 - 特征重要性与标签分类
我有一组与 Vanilla 磅蛋糕烘焙相关的数据(200 行)，具有 27 个特征，如下所示。标签caketaste是衡量烤蛋糕的好坏程度，由 bad(0) 定义, neutral(1) , good
复杂连接的 Hibernate 映射
我有试图映射到新代码的遗留代码。 OLD_PERSON pid sid name age NEW_PERSON pid sid fid age RESOLVE_PERSON pid fid statu
带有鉴别器的 hibernate 映射
我有一个表，其中一个字段可以指向其他 3 个表之一中的外键，具体取决于鉴别器值是什么(Project、TimeKeep 或 CostCenter。通常这是用子类实现的，我想知道我有什么注意子类名称与
Haskell:映射 runST
我有一个类型 [ST s (Int, [Int])] 的绑定(bind)我正在尝试申请runST使用映射到每个元素，如下所示: name :: [ST s (Int, [Int])] --Of Cou
子类和连接子类的 NHibernate 映射
在我正在进行的项目中，我有以下实体:分析师、客户和承包商。每个都继承自基类 User。 public abstract class User { public virtual int Id
用户输入的 Vim 映射
我想知道是否可以在 Vim 中创建一个映射(对于普通模式)，允许用户在映射执行之前输入。我想为我最常用的 grep 命令创建一个快捷方式的映射。我希望命令允许输入我正在搜索的内容，然后在输入时执行。

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城