从父子 JSON 数据中获取所有子级

2023-12-27

我有父子 JSON 数据,我想从选定的父级获取所有子级(嵌套子级)。

例如,我有 JSON 数据:

[{
  "id": 1,
  "parent": 0,
  "name": "Parent"
}, {
  "id": 2,
  "parent": 1,
  "name": "Child 1"
}, {
  "id": 3,
  "parent": 2,
  "name": "Grand Child 1"
}, {
  "id": 4,
  "parent": 2,
  "name": "Grand Child 2"
}, {
  "id": 5,
  "parent": 1,
  "name": "Child 2"
}]

我有函数 findAllChildren(1),其中“1”是“父”,然后函数的结果应该是:

[{
  "id": 2,
  "parent": 1,
  "name": "Child 1"
}, {
  "id": 3,
  "parent": 2,
  "name": "Grand Child 1"
}, {
  "id": 4,
  "parent": 2,
  "name": "Grand Child 2"
}, {
  "id": 5,
  "parent": 1,
  "name": "Child 2"
}]

在其他情况下,如果我调用 findAllChildren(2),该函数的结果应如下所示:

[{
  "id": 3,
  "parent": 2,
  "name": "Grand Child 1"
}, {
  "id": 4,
  "parent": 2,
  "name": "Grand Child 2"
}]

创建函数来解决这种情况的正确方法是什么?谢谢。


您只需迭代原始数据并查找具有指定 id 作为parent_id 的项目。如果找到,则使用元素的 id 递归执行相同的操作。

在这里查看:https://jsfiddle.net/6ydog1tj/2/ https://jsfiddle.net/6ydog1tj/2/

function findAllChildren (id, results, depth) {
    for (d in data) {
        if (data[d].parent == id) {
            data[d].depth = depth
            results.push(data[d])
            findAllChildren(data[d].id, results, depth + 1)
        }
    }
}

var results = []
findAllChildren(1, results, 0)

$('body').append(results.map(function (element) { return Array(element.depth + 1).join(' -> ') + element.name + '<br>' }))

console.log(results)

打印出来

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

从父子 JSON 数据中获取所有子级 的相关文章

  • .addClass 仅添加到无序列表中单击的项目符号

    我有一个简短的无序列表 其中有两个项目符号 我添加了一些 Javascript 这样当我单击项目符号时 它会向其中添加一个类 问题是 它将该类添加到所有现有的 li 中 而不仅仅是我单击的那个 这是 JSFiddle http jsfidd
  • WCF 自定义序列化器

    我正在 WCF 中创建一个返回 JSON 的 Web 服务 但 DataContractJsonSerializer 对某些循环引用犹豫不决 在这种特殊情况下我无法删除这些引用 相反 我想使用 Newtonsoft json 库 在 WCF
  • 为什么将 Backbone.js 与 Rails 结合使用? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • onbeforeunload 或单击浏览器后退按钮需要帮助

    如果用户单击浏览器的后退按钮 那么我希望出现提示并要求确认 如果用户单击 确定 那么它应该导航到xx html 如果用户单击 取消 则应阻止导航 我怎样才能做到这一点 注意 我已经尝试过onbeforeunload方法 但它适用于所有导航操
  • Django CBV表单提交返回的JSON显示为新页面

    我正在使用 Django 3 2 我正在创建一个简单的时事通讯订阅表格 表单提交将 JSON 返回到前端 然后应该使用前端来更新页面的部分内容 但是 当我发布表单时 JSON 字符串将在新页面上显示为文本 这是调用视图的路由 urlpatt
  • 缩放对象上的弹跳动画

    拥有对象比例 然后在返回到原始比例因子之前以该比例因子执行弹跳动画的最佳方法是什么 我意识到我可以做一些事情 比如将其缩放到 2 2 然后 1 8 然后 2 0 但我正在寻找一种方法 您只需在比例因子上执行弹跳动画 因为我的比例因子会改变
  • 表格中与文本一起内嵌 D3 迷你图

    假设有一个这样的表 var data Orange Orange 6 3 3 2 5 Apple Red 6 2 6 5 5 Grape Purple 9 1 2 3 1 我希望将字符串表示为字符串 但将数字数组表示为 D3 折线图 如果这
  • 将 HTML 编辑器的内容保存为桌面上的 HTML 文件

    我想通过单击按钮来保存 TinyMce HTML 编辑器的内容 TinyMce 是本地安装的 我在 Chrome 中使用它 我见过这个answer https stackoverflow com a 30740104 3154274然后on
  • d3 饼图中的文本被路径覆盖

    我正在尝试按照 d3 的饼图示例进行操作http bl ocks org mbostock 3887235 http bl ocks org mbostock 3887235 我的代码的最小示例 const container graph
  • Web API 复杂参数属性均为 null

    我有一个 Web API 服务调用可以更新用户的首选项 不幸的是 当我从 jQuery ajax 调用中调用此 POST 方法时 请求参数对象的属性始终为 null 或默认值 而不是传入的值 如果我使用 REST 客户端调用相同的方法 我使
  • 如何沿着 Parse Promise 链传递额外数据[重复]

    这个问题在这里已经有答案了 在我的 Parse Cloude 代码中 我需要运行几个连续的查询 每个查询都使用 find Example var promise firstQuery get objectId then function r
  • Android AsyncTask 第二次调用时未执行

    我有一个扩展 AsyncTask 的类 public class SendJSONArray2Server extends AsyncTask
  • 在 Node.js 中封装 require 可以解决相对路径调用

    我正在尝试创建一个 require 包装器来加载依赖项 但我发现很难让它像原始的 require 函数一样工作 当路径是相对路径时 包装器无法解析为正确的路径 因为我的加载程序和调用程序文件不在同一文件夹中 这是一个简化的描述 index
  • Angular JS:当我们已经有了具有作用域的指令控制器时,指令的链接函数需要什么?

    我需要对范围和模板执行一些操作 看来我可以在以下任何一个中做到这一点link函数或controller函数 因为两者都可以访问该范围 什么时候我必须使用link功能而不是控制器 angular module myApp directive
  • Javascript:如何过滤对象数组并对结果求和

    我有一个对象数组 var example a 1 b 2 c 3 a 4 b 5 c 6 a 7 b 8 c 9 我正在尝试添加所有不对应的值c 我已经设法用 console log test filter x gt x c gt 3 过滤
  • serde_json::from_str 错误,其中字符串来自文件

    extern crate serde json use serde json Value use std fs File use std io prelude fn main let filepath map test anhui txt
  • 有没有办法避开 Google 路线中的特定道路或坐标?

    API 有一个航路点参数 以便 API 计算经过指定航路点的路线 有什么方法可以给出要避开的航路点而不是要经过的航路点 它 目前 尚未实施 有一个开放的功能请求 问题 214 影响方向的能力 例如 避免 路障 https code goog
  • 如何使用FileSystem API的window.requestFileSystem?

    我用 JavaScript 编写了以下代码 JavaScript 代码 var fs null function initFS window requestFileSystem window requestFileSystem window
  • Origin 无权使用地理定位服务 - 即使通过 HTTPS

    我有一个通过 HTTPS 使用 HTML5 地理定位的网页 它在桌面浏览器上运行良好 然而 在 iOS Safari 上 我收到错误 Origin 无权使用地理定位服务 我已确保页面上的所有内容都通过 HTTPS 加载 每个图像 每个脚本和
  • 如何在没有消息时隐藏 Bootstrap 警报框

    我用 Bootstrap 做了一个简单的警报框 如下所示 div class alertBox span class alert alert info bag session username span div When there is

随机推荐