程序员经验分享-hwhale

按嵌套数组键分组

2024-01-01

我有一些示例数据，显示了与文档相关的一些数据（docs.id）及其所指的人（details.id) :

const docs = [
        {
          id: "89",
          state: "accepted",
          details: [
            {
              id: 20656,
              type: "Claimant",
              name: "First Name Last Name",
              first_name: "First Name",
              last_name: "Last Name",
              type_label: "claimant"
            }
          ]
        },
        {
          id: "45",
          state: "accepted",
          details: [
            {
              id: 20656,
              type: "Claimant",
              name: "First Name Last Name",
              first_name: "First Name",
              last_name: "Last Name",
              type_label: "claimant"
            },
            {
              id: 20657,
              type: "Fellow",
              name: "Fellow First Name Fellow Last Name",
              first_name: "Fellow First Name",
              last_name: "Fellow Last Name",
              type_label: "fellow"
            }
          ]
        },
        {
          id: "47",
          state: "rejected",
          details: [
            {
              id: 20656,
              type: "Claimant",
              name: "First Name Last Name",
              first_name: "First Name",
              last_name: "Last Name",
              type_label: "claimant"
            }
          ]
        }
      ]
      
    const groups = docs.reduce((groups, item) => {
    const group = groups[item.details] || [];
    group.push(item);
    groups[item.details] = group;
    return groups;
  }, {});

  console.log("groups: ", groups);

我正在尝试操纵这个数组，以便我可以对每个人进行分组（details.id）她所有的相关文档（docs.id）这样我以后就可以在反应应用程序中使用结果，但它不是那样工作的。

编辑（添加预期结果）：

  const new = [
      {
        id: 20656,
        type: "Claimant",
        name: "First Name Last Name",
        docs: [89,45,47]
      },
      {
        id: 20656,
        type: "Fellow",
        name: "Fellow First Name Fellow Last Name",
        docs: [47]
      }
    ]

  • Using Array#reduce https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce, 迭代docs同时更新一个Map https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map其中键是详细信息 ID，值是累积的详细信息docs array
  • In each iteration, iterate over the current details using Array#forEach https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach:
    • Using Map#get https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/get, 获取当前detail-id的累积对象，否则使用初始对象
    • Using Array#push https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push，将 doc-id 添加到其docs array
    • Using Map#set https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/set，用新值更新地图
  • Using Map#values https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/values, 返回分组项列表
const docs = [
  {
    id: "89",
    state: "accepted",
    details: [
      { id: 20656, type: "Claimant", name: "First Name Last Name", first_name: "First Name", last_name: "Last Name", type_label: "claimant" }
    ]
  },
  {
    id: "45",
    state: "accepted",
    details: [
      { id: 20656, type: "Claimant", name: "First Name Last Name", first_name: "First Name", last_name: "Last Name", type_label: "claimant" },
      { id: 20657, type: "Fellow", name: "Fellow First Name Fellow Last Name", first_name: "Fellow First Name", last_name: "Fellow Last Name", type_label: "fellow" }
    ]
  },
  {
    id: "47",
    state: "rejected",
    details: [
      { id: 20656, type: "Claimant", name: "First Name Last Name", first_name: "First Name", last_name: "Last Name", type_label: "claimant" }
    ]
  }
];
      
const groups = [...
  docs.reduce((detailMap, { id: docId, state, details = [] }) => {
    details.forEach(({ id, type, name }) => {
      const detail = detailMap.get(id) ?? { id, type, name, docs: [] };
      detail.docs.push(docId);
      detailMap.set(id, detail);
    });
    return detailMap;
  }, new Map)
  .values()
];

console.log("groups: ", groups);
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

ReactJS

按嵌套数组键分组 的相关文章

  • 在新的 Google 协作平台 <嵌入 HTML> 中使用 localStorage 和 IndexedDB 不起作用

    我正在尝试将新的 Google 协作平台用于我开发的网页 但是 我在存储本地数据时遇到了问题 本地文件在 Windows 和 Apple safari chrome 中运行良好 从 Google 协作平台尝试一下 没有什么乐趣 此外 在 s

  • 如何在react-bootstrap中禁用表单提交的键

    在下面的代码片段中 我有许多文本类型的输入表单 如果用户点击 我似乎会得到相同的合成事件 就像他们按下提交按钮一样 我想忽略作为表单提交 只允许一个人按下 提交 按钮 我删除了一些表单组以减少示例 在所有情况下 按钮或 ENTER 键 e

  • Chrome 中的性能问题

    我目前正在从事一个相对较大的项目 使用 AngularJs 构建 应用程序的一部分是一个表单 您可以向其中添加任意数量的页面 不幸的是 添加了很多不必要的垃圾 即表示表单模型的对象可能会变得非常大 在某些时候 Chrome 基本上无法处理它

  • 使用 JavaScript 禁用第三方 cookie

    我正在努力根据所有在欧盟运营的公司的数据保护规则实施新的 Cookie 政策合规性 根据该规则 用户在使用任何网站时必须能够拒绝 接受除必需的 Cookie 之外的所有内容 在我客户的网站中 我可以看到正在存储以下第三方 cookie ga

  • 带有淘汰赛js的隐形recaptcha

    我正在完成隐形验证码 但我在实现它时遇到问题 谷歌开发人员页面中的代码显示它应该是这样的

  • Snap.svg - 停止在可悬停元素的子元素上重新触发悬停事件

    对于一个项目 我使用的 SVG 形状由背景多边形和背景多边形上方的一些文本 我已将其转换为路径 组成 我正在使用 Snap svg 为我的形状设置动画 当我将鼠标悬停在多边形上时 形状应该缩放到特定尺寸 包括其中的所有内容 鼠标移开时 形状

  • 隐藏 Div 的父级

    我只是想隐藏父divcomments section div class content content green div div div 我试过这个 document getElementById comments section pa

  • 有没有办法使用 Rspec/Capybara/Selenium 将 javascript console.errors 打印到终端？

    当我运行 rspec 时 是否可以让 capybara selenium 向 rspec 报告任何 javascript console errors 和其他异常 我有一大堆测试失败 但当我手动测试它时 我的应用程序正在运行 如果不知道仅在

  • 如何将函数附加到弹出窗口关闭事件（Twitter Bootstrap）

    我做了一些搜索 但我只能认为我可以将事件附加到导致其关闭的按钮 https stackoverflow com questions 13205103 attach event handler to button in twitter boo

  • 调整图像大小并将画布旋转 90 度

    这里有很多关于在 js 上使用画布旋转图像的主题 我阅读了其中的大部分内容 但无法找到解决我的问题的方法 我正在接收任何分辨率的图像 来自上传组件 我将其大小调整为 1024x768 如下所示 var canvas document cre

  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o

  • 检查 jQuery 1.7 中是否存在基于文本的选择选项

    所以我有以下 HTML 片段

  • 有没有办法在 onclick 触发时禁用 iPad/iPhone 上的闪烁/闪烁？

    所以我有一个有 onclick 事件的区域 在常规浏览器上单击时 它不会显示任何视觉变化 但在 iPad iPhone 上单击时 它会闪烁 闪烁 有什么办法可以阻止它在 iPad iPhone 上执行此操作吗 这是一个与我正在做的类似的示例

  • Vuejs 2：去抖动不适用于手表选项

    当我在 VueJs 中反跳此函数时 如果我提供毫秒数作为原语 它就可以正常工作 但是 如果我将其提供为对 prop 的引用 它会忽略它 这是道具的缩写版本 props debounce type Number default 500 这是不

  • 在 ReactJS 中创建动态目录

    我有一个组件 它代表一个页面 其中有多个SectionHeader 组件作为该页面的子组件 我想通过检查 Page 的子项 SectionHeaders 来动态创建目录

  • 正则表达式 - 从 markdown 字符串中提取所有标题

    我在用灰质 https www npmjs com package gray matter 以便将文件系统中的 MD 文件解析为字符串 解析器产生的结果是这样的字符串 n Clean er ReactJS Code Conditional

  • 在 JavaScript 循环之外声明变量可以提高速度和内存？

    C 也有类似的问题 但我们没有看到 JavaScript 的任何问题 在循环内声明变量是否可以接受 假设循环有 200 次迭代 使用样本 2 相对于样本 1 是否有性能要求 内存和速度 我们使用 jQuery 来循环 它提高了我们将 var

  • 在 Shopify 商店中嵌入 Vue 组件

    在产品页面中 我尝试显示自定义 Vue 组件 为简洁起见 该组件根据给定的产品 ID 显示 Firebase 数据库中的一些信息 我最初尝试将其制作为 Shopify 应用程序 以便我可以访问他们的 API 我实现了 OAuth 并且可以检

  • 用于交互式图形绘制的轻量级 JavaScript 库？ [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我有兴趣了解用于绘制交互式图表的最轻量级 javascript 库 我掌握的数据主要是与海洋研究相关的科学数据 我知道一些 jquery

  • 如何用另一个响应替换窗口的 URL 哈希？

    我正在尝试使用替换方法更改哈希 URL document location hash 但它不起作用 function var anchor document location hash this returns me a string va

随机推荐

热门标签