如何按parentId JS对对象数组进行排序

2024-03-21

我怎样才能对这个数组进行排序? 我正在尝试对来自 a 的对象数组进行分组parentId数组的每个元素带来的级别总是不确定的,我期望的结果就是输出中的结果。

Input:

[
  {
    "_id": "123",
    "name": "ABC",
    "parentID": ""
  },
  {
    "_id": "645",
    "name": "ABC 2",
    "parentID": "123"
  },
  {
    "_id": "65",
    "name": "ABC 3",
    "parentID": ""
  }
]

Output:

[
  {
    "_id": "123",
    "name": "ABC",
    "parentID": "",
    "children": [
      {
        "_id": "645",
        "name": "ABC 2",
        "parentID": "123"
      },
    ]
  },
  {
    "_id": "65",
    "name": "ABC 3",
    "parentID": ""
  }
]

感谢帮助


This https://jsfiddle.net/Bobkorinek/3sgpqf0a/6/即使对于嵌套的孩子也应该起作用:

const input = [{
        "_id": "123",
        "name": "ABC",
        "parentID": ""
    },
    {
        "_id": "645",
        "name": "ABC 2",
        "parentID": "123"
    },
    {
        "_id": "65",
        "name": "ABC 3",
        "parentID": "645"
    }
]

function map(data) {
    const childMap = data.reduce((map, child) => {
        return {
            ...map,
            [child._id]: {
                ...child
            }
        };
    }, {});

    const root = [];

    Object.values(childMap).forEach((child) => {
        if (child.parentID) {
            if (childMap[child.parentID]) {
                const parent = childMap[child.parentID];
                if (!parent.children) {
                    parent.children = [];
                }

                parent.children.push(child)
            }
        } else {
            root.push(child);
        }
    })

    return root;
}

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

如何按parentId JS对对象数组进行排序 的相关文章

  • JAVASCRIPT - 为什么这个对象没有改变?

    function myFunc theObject theObject make Ford model Focus year 2006 var mycar make Honda model Accord year 1998 var x my
  • 从选择 onChange 调用 javascript 函数 [重复]

    这个问题在这里已经有答案了 所以我有一个简单的 HTML 选择框和一个 javascript 警报功能 我希望选择框有一个 onchange 事件来调用 javascript 警报函数 这是我到目前为止所拥有的 HTML div Type
  • Javascript 作为对象键的函数与块中标记函数之间的语法冲突

    假设您有一个支持两者的浏览器带标签的函数声明 https developer mozilla org en US docs Web JavaScript Reference Statements label Labeled function
  • Apache Thrift Java-Javascript 通信

    我正在编写一个基于 Apache Thrift 的 Java 服务器 它将从 Javascript 客户端接收数据 我已经完成了 Java 服务器 但问题是我可以获得 Javascript 客户端的工作示例 我无法找到一个好的示例 构建文档
  • websockets 如何处理同一浏览器的两个选项卡

    I have 1 个 PHP 服务器 提供 http 请求 和 1 node js 发布更新的数据消息 每个连接都带有 websocket php 服务器设置其 cookie 在一个浏览器中 此 cookie 可在所有选项卡中使用 当浏览器
  • 二维数组作为字典的项目

    我想用一个项目的几个属性填充字典 例子 我正在考虑拥有Item 1 and Item 2 as Dictionary键与array这将保留其属性 我需要能够单独访问项目的每个属性 因此将它们连接为一个字符串不是一种选择 我正在考虑类似下面的
  • 如何按元素添加两个 Rust 数组?

    这绝对是一个初学者问题 但我搜索了半个小时后找不到任何有用的东西 我有 Rust 1 7 0 和这段代码 type coord i64 3 add two coordinates vectors pointwise that is if z
  • 使用 float:left 与 display:inline-block 的 jQuery UI 拖放排序比较

    我这里有两个例子 这两个例子之间的唯一区别是 一种使用display inline block 另一种使用float left li doc item 显示 内联块 与 li doc item float left 我的问题是 displa
  • jQuery:将文本区域滚动到给定位置

    我有一个包含很多文本的文本区域
  • java中如何重新初始化int数组

    class PassingRefByVal static void Change int pArray pArray 0 888 This change affects the original element pArray new int
  • Angular 4 Http POST 不起作用

    我希望每个人都做得很好 我最近开始使用 Angular 4 4 我一直在尝试将数据发布到我的 api 服务器 但不幸的是它不起作用 我花了大约两天的时间 但仍然没有成功 甚至已经尝试过 6 7 篇文章角 io https angular i
  • Angular2:动态同步http请求

    Goal 发出一系列同步 http 请求并能够将它们作为一个可观察流进行订阅 示例 不工作 let query arr test1 test2 test3 function make request query arr if query a
  • 如何知道 .keyup() 是否是字符键(jQuery)

    如何知道 keyup 是否是字符键 jQuery input keyup function if key is a character such as a b A b c 5 3 2 etc not enter key or shift o
  • 如何从 html 页面 [javascript] 调用 Web 服务方法而不刷新页面

    我有一个webservice这将返回一个值 我的要求是 我需要调用它webservice从一个index html页面 该页面有一个 html 提交按钮 在该按钮上单击我正在呼叫JavaScript 从那里我想调用网络方法 我怎样才能做到这
  • 从字节数组设置 img src

    我需要设置img src我在对象中拥有的字节数组的属性 img
  • Angular JS - 使服务可以从控制器和视图全局访问

    假设我们有以下服务 myApp factory FooService function 然后 从控制器中 我会说 myApp controller FooCtrl scope FooService function scope FooSer
  • Svelte 条件元素类报告为语法错误

    我正在做一个if块每if 块的精简指南 https svelte technology guide if blocks 这看起来很简单 但 Svelte 认为这是一个语法错误 svelte plugin ParseError Unexpec
  • 了解 Document.createElement()

    我在用着GWT及其底层DOM能力 我基本上想要实现的是 Have a div包含一些文本的元素 其中一些文本将被包围span元素 span 元素可相互拖动并提供上下文菜单 New span元素可以由最终用户动态创建 它可能是这样的 在应用程
  • 如何缩短 PHP if 语句?

    我有一个 if 语句 我需要将单个字符串与许多不同的选项进行比较 我在下面发布的代码非常清楚地表明了我的意思 我知道有两种方法可以做到这一点 但另一种甚至更长 那么 是否有任何函数可以以更短的方式实现类似的功能 我的要求可能看起来很愚蠢 但
  • Java 中序列化的目的是什么?

    我读过很多关于序列化的文章 以及它如何如此美好和伟大 但没有一个论点足够令人信服 我想知道是否有人能真正告诉我通过序列化一个类我们真正可以实现什么 让我们先定义序列化 然后我们才能讨论它为什么如此有用 序列化只是将现有对象转换为字节数组 该

随机推荐

  • 当我们的表不需要主键时? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我们会设计一个不需要主键的表吗 No 主键在幕后做了很多事情 即使您的应用程序从不使用它 例如 聚类 http blogs oracle com
  • Angular 4 在共享服务中发出并订阅事件

    我在我的主要组件中发出一个事件 主要组件 ts this sharedService cartData emit this data 这是我的sharedService ts import Component Injectable Even
  • 升级到 Spring 4.2 后 ContentNegotiatingViewResolver MediaTypes 错误

    我有一个dispatcher servlet xml 文件 其中包含Bean像这样
  • 如何指示 Sprockets 包含 Heroku 上 /vendors/assets/components 中的文件?

    我想使用 Bower 管理客户端资产 它将 Angular 等资源安装到 vendors assets components angular angular js 我在中引用了这些资产application css scss文件如下 req
  • 观察 ES6 映射和集的变化

    有什么方法可以观察 ES6 地图和集合的添加和删除吗 对象观察 https developer mozilla org en US docs Web JavaScript Reference Global Objects Object ob
  • 如何使用变量作为映射的关键部分

    假设我有 def A abc def X xyz 我如何创建一个Map哪里 而不是 def map A 1 X 2 我得到的相当于写作 def map abc 1 xyz 2 但可以使用变量A and X为了钥匙 P S 对于地图的价值部分
  • 使用 Firestore 进行多路径更新

    我在所有有关 Firestore 的文章中都提到 它比 Realtime Firebase 需要更少的非规范化 我想这是因为它是一个文档数据库 您可以在其中指向特定文档并仅检索该数量的数据 但是 我想知道如何管理非规范化仍然有用的情况 例如
  • 使用逗号和引号作为分隔符解析 csv 文件

    所以我正在读取 csv 文件并用 作为分隔符分割字符串 但其中一些带有引号 以免分割特定字段 因为其中有逗号 1530 加利福尼亚州帕萨迪纳 2008 05 01 2005 12 14 如果只用逗号 那就是 1530 加州帕萨迪纳 2008
  • 使用 Parse 保存后检索 ID

    我正在使用 Parse javascript api 所以我对使用解析很陌生 我在数据浏览器中创建了一个新类 并将信息保存到其中 我想做的是保存但获取 Parse 自动创建的 id 保存后有没有办法从数据中返回一列 var TestData
  • 如何在Python中将不同类型的元素连接到列表?

    list1 1 3 2323 pause list2 2 4 5 print join list1 print join list2 对于上面的代码 元素list2可以毫无问题地连接 但加入list1报告错误 TypeError seque
  • 操作错误:(2001,“无法创建 UNIX 套接字 (24)”)

    我正在使用 django 1 2 和 python 2 6 并且我正在使用 mysql 服务器 经过一段时间的工作 选择和更新记录后 我收到此错误 Exception in thread Thread 269 Traceback most
  • 0 到 n 范围内的随机数

    给定一个产生真正随机 32 位数字的函数 R 我想要一个返回 0 到 n 范围内的随机整数的函数 其中 n 是任意的 小于 2 32 该函数必须以相同的概率生成 0 到 n 的所有值 我想要一个在恒定时间内执行的函数 没有 if 语句或循环
  • 如何在QWebEngineView中保存动态生成的网页?

    我正在将网页加载到QWebEngineView 用户创建不同类型的表格 报告 然后需要将这些表格作为网页保存到本地计算机 这是我尝试过的 这里我使用一个QWebEnginePage save 方法 但没有任何反应 connect saveB
  • 在Python中的远程机器上执行命令

    我正在 Ubuntu 上用 python 编写一个程序来执行命令ls l在 RaspberryPi 上 连接网络 有人可以指导我该怎么做吗 当然 有多种方法可以做到 假设您有一个 Raspberry Piraspberry lan主机和您的
  • 如何将字符串传递给批量插入而不是文件?

    我曾经使用批量插入命令来转换 Csv 文件 int 表 最近 我将 CSV 文件保存为 SQL Server 中的 VarBinary 值 现在我可以通过使用 CAST 和 CONVERT 函数将其类型转换为 Varchar 来从 Varb
  • 发布 apk 后的真实 Android 设备上的 Google 地图仍然是空白

    我想生成并使用 google API 密钥 启用谷歌地图 v2 API 使用谷歌地图创建了包含一项活动的项目 工作室中的默认向导 在谷歌上创建了用于调试项目的密钥 并已分配SHA1 应用程序包谷歌上项目密钥的应用 API 密钥已插入 goo
  • 如何在mapbox ios sdk中向MGLFillStyleLayer添加线宽属性?

    我必须使用 MGLPolygonFeature 在 MGLFillStyleLayer 中添加多边形特征 但问题是我无法更改轮廓宽度 线宽为MGLFillStyleLayer目前无法更改 建议的解决方法是使用相同的源来创建MGLLineSt
  • 将 grails 从 2.1.1 升级到 2.4.3

    我正在将 grails 应用程序从 2 1 1 升级到 2 4 3 解决升级过程中的错误是一个永无止境的故事 现在我被困在这一点上 有什么想法如何解决这个问题吗 Thanks C workspace grails apps monitori
  • 如何在 Jooq 中比较日期

    In the mysqldb 我有一个字段名称date type date 该字段的值如下2019 11 05 如何在jooq中查询上面提到的日期 我尝试跟随 java util Date date SimpleDateFormat yyy
  • 如何按parentId JS对对象数组进行排序

    我怎样才能对这个数组进行排序 我正在尝试对来自 a 的对象数组进行分组parentId数组的每个元素带来的级别总是不确定的 我期望的结果就是输出中的结果 Input id 123 name ABC parentID id 645 name