如何从嵌套的对象数组中获取每个父级的值

2024-05-18

所以我有多个对象数组,每个对象都包含一个子对象。

e.g

const data = [
    {
        id: 1,
        name: 'parent 1',
        children: [
            {
                id: 'c1',
                name: 'child 1',
                children: [
                    {
                        id: 'g1',
                        name: 'grand 1',
                        children: [],
                    },
                ],
            },
        ],
    },
    {
        id: 2,
        name: 'parent 2',
        children: [
            {
                id: 2,
                name: 'c1',
                children: [],
            },
        ],
    },
    { id: 3, name: 'parent 3', children: [] },
];

我想要发生的是,如果我正在搜索的 ID 是 'g1',我会得到结果

const result = ['parent 1', 'c1', 'grand 1']

循环只会停止并获取它所经过的所有名称,直到满足条件(在本例中为 id)

当前方法已完成

/**
 * Details
 * @param id the value you are searching for
 * @param items nested array of object that has child
 * @param key name of the value you are looking for
 * @returns string of array that matches the id
 * @example ['parent 1', 'c1', 'grand 1']
 */
export function findAll(id: string, items: any, key: string): string[] {
  let i = 0;
  let found;
  let result = [];

  for (; i < items.length; i++) {
    if (items[i].id === id) {
      result.push(items[i][key]);
    } else if (_.isArray(items[i].children)) {
      found = findAll(id, items[i].children, key);
      if (found.length) {
        result = result.concat(found);
      }
    }
  }
  return result;
}


我编写的这段迭代代码可能会对您有所帮助。它基本上遍历存储从顶层到所需 id 的路径的结构:

function getPath(obj, id) {
    // We need to store path
    // Start stack with root nodes
    let stack = obj.map(item => ({path: [item.name], currObj: item}));
    while (stack.length) {
        const {path, currObj} = stack.pop()
        if (currObj.id === id) {
            return path;
        } else if (currObj.children?.length) {
            stack = stack.concat(currObj.children.map(item => ({path: path.concat(item.name), currObj: item})));
        }
    }
    return null; // if id does not exists
}

此代码假设您的结构是正确的并且没有丢失任何部分(除了可以为空的子项)。 顺便问一下,你的答案正确吗?我想路径应该是:["parent 1", "child 1", "grand 1"]

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

如何从嵌套的对象数组中获取每个父级的值 的相关文章

  • 如何处理 d3 中 Beeswarm 图中的碰撞?

    我一直在玩这个例子here https gf neocities org co2bs co2bee html一会儿 我想做的是突出显示图中的单个节点 圆圈 通过使用边框使其变大 稍后我也想在其中添加文本或字母 目前 我已经圈了Bhutan图
  • 通过搜索查找下一个文本并突出显示不起作用

    当在搜索框中搜索任何文本时 它可以找到并突出显示正确的文本 但是当搜索下一个 新文本时 它无法找到下一个 新文本 再次搜索时它不起作用 我无法找到问题 这JS below JS button search click function va
  • 如何在 jQuery 中使用 CSS“background-image”属性添加的图像上绑定单击事件

    这是我的小提琴link http jsbin com otisur 1 edit 我想我的问题通过标题本身就很清楚了 尽管如此 我正在寻找一种绑定的方法click使用 css 添加的图像上的事件background image财产 我知道
  • Javascript:如何根据 html 标签扩展用户选择?

    乐代码 http jsfiddle net frf7w 12 http jsfiddle net frf7w 12 所以现在 当前的方法将完全按照 选择的方式获取所选文本 并添加标签 以便在显示时页面不会爆炸 但我想做的是 就是说 当用户选
  • Angular - Safari 无法正确显示 DOM

    我是 Angular 的新手 使用 Angular 4 我尝试通过在关联的组件类文件中设置属性来更新特定元素 但是 除非我尝试强制重新绘制网页 通过调整窗口大小等 否则页面不会更新 我打开检查器 看到 DOM 已更改 但显示与元素检查器中的
  • JavaScript 逻辑赋值是如何工作的?

    在 javascript 中 如果我们有一些代码 例如 var a one var b q a alert b 逻辑 OR 运算符会将 a 的值分配给 b 并且警报将为 一 这仅限于作业还是我们可以在任何地方使用它 似乎空字符串被视为与未定
  • jquery:如何检查div中的所有单选按钮是否被选中

    我的 html 看起来像这样 div div
  • Backbone.js 与 Google 地图 - 有关此问题和侦听器的问题

    我有一个为 Google Maps v3 创建的模块 我正在尝试将其转换为 Backbone js 视图构造函数 到目前为止 这是我的视图模块 我将解释代码后遇到的问题 pg views CreateMap Backbone View ex
  • 如何在WebBrowser控件中注入Javascript?

    我试过这个 string newScript textBox1 Text HtmlElement head browserCtrl Document GetElementsByTagName head 0 HtmlElement scrip
  • 大小为 8 的无效写入,C Valgrind,字符串数组

    我一直在使用 valgrind 和 gdb 但我不太明白问题是什么 它跳来跳去太多了 我无法在 gdb 中真正追踪它 而在 valgrind 中我没有足够的信息 这是我的 makeargv 函数 它将 strtok 输出的字符串放入数组中
  • 设置股票数据 Highcharts xAxis 的格式

    我已经浏览了需要为 xAxis 属性设置的 Highcharts 选项来格式化时间标签 但没有运气了解这对于这种情况到底是如何工作的 我在白天 盘中 检索了股票的动态数据 我需要显示这些数据 因为检索的数据每天从 9 30 开始到 17 0
  • 将数字限制为段的最优雅的方法是什么?

    比方说x a and b是数字 我需要限制x到段的边界 a b 换句话说 我需要一个钳位功能 https math stackexchange com q 1336636 clamp x max a min x b 有人能想出一个更易读的版
  • apollo 客户端从存储中删除而不发生突变

    我需要通过 id 从本地存储中删除一条 记录 而不使用突变 因为服务器不支持突变 我尝试像这样手动访问商店 delete this apolloClient store getState apollo data 1112 这会删除记录 但是
  • backbone.js:视图中影响集合中不同模型的按钮

    我刚刚开始使用backbone js 到目前为止 我真的很喜欢它 我有这样的事情 ModelA ModelB ViewA ViewB ModelA 持有 ModelB 的集合 如何使用按钮构建模型 B 的视图 单击该按钮会更改集合中下一个
  • Skrollr 添加空白

    我已经尝试了一切 我在谷歌上阅读了 4 5 页试图找到适合我的修复程序 已经筋疲力尽了 即使我使用 skrollr 示例 我的问题仍然存在 不是说他们做错了什么 我知道我只是没有正确理解它 因此 我上传了一个演示 仅在移动设备上展示这个尴尬
  • 按字典顺序对整数数组进行排序 C++

    我想按字典顺序对一个大整数数组 例如 100 万个元素 进行排序 Example input 100 21 22 99 1 927 sorted 1 100 21 22 927 99 我用最简单的方法做到了 将所有数字转换为字符串 非常昂贵
  • 将 javascript 变量作为参数传递给 @url.Action()

    是否可以将javascript变量作为参数传递给 url Action 因为据我所知可能存在服务器和客户端问题 我的要求是我必须根据过滤器下载文件 并进行ajax调用不适用于下载文件 所以我对 url Action 进行了编码 但无法实现这
  • 允许 iframe 跨域链接到目标父框架

    我有 2 个域 域 1 上的一个页面使用 iframe 加载域 2 中的内容 如何允许来自domain2 iframe 内 的链接在domain1 的完整父框架中打开 我一直在关注IE和w3c的新沙箱属性 http www w3 org T
  • 开玩笑 setTimeout 不暂停测试

    it has working hooks async gt setTimeout gt console log Why don t I run expect true toBe true 15000 我已经查看了这个答案 Jest 文档和几
  • 角度 2 ngIf 与可观察?

    我有一个非常简单的服务 它的工作是从 api authenticate url 获取 200 或 401 auth service ts Injectable export class AuthService constructor pri

随机推荐

  • SSRS - RDLC Tablix 行不会跨页面拆分

    我有一个包含两列数据的 Tablix 部分名称和部分文本 对于某些部分 部分文本变得如此之大 以至于代表该部分的行占据了页面的 2 3 或更多 报告打印得很好 直到这些大行中的其中一个必须在页面末尾拆分并继续在下一页上 在这种情况下 并且仅
  • 尝试获取 Google accessToken

    看起来 无论我做什么 谷歌都在竭尽全力阻止我完成这个研究项目 我的项目让我使用 Google 电子表格作为数据库 并使用所述电子表格中的数据执行程序化的 Google 图片搜索 并向最终用户显示一些结果 设置说明 我开始按照此处的说明进行操
  • 非 hdfs 文件系统上的 hadoop/yarn 和任务并行化

    我已经实例化了 Hadoop 2 4 1 集群 并且发现运行 MapReduce 应用程序的并行化方式会有所不同 具体取决于输入数据所在的文件系统类型 使用 HDFS MapReduce 作业将生成足够的容器 以最大限度地利用所有可用内存
  • 如何使用 jQuery 进行同步请求?

    为什么不返回该函数的responseText function LoadBookmarksAsXml return ajax type GET async false url http www google com bookmarks ou
  • Android Things 5​​.1 - 9 位 UART

    我正在尝试使用 Android Things 支持 9 位 UART 当我尝试将数据大小设置为 9 时 我收到 IO 异常 唯一有效的配置是 7 位和 8 位 我知道可以使用奇偶校验错误中断进行 9 位模拟 但在 Android 上 我没有
  • 从日期变量创建月末日期

    我有一个包含日期变量的大型数据框 它反映了该月的第一天 有没有一种简单的方法来创建代表该月最后一天的新数据框日期变量 以下是一些示例数据 date start month seq as Date 2012 01 01 length 4 by
  • 如何清除 Slatejs v0.50+ 中的编辑器?

    我不知道如何删除 Slate v0 50 中编辑器中的所有内容 我曾经能够做这样的事情 editor moveToRangeOfDocument delete 我现在该怎么做 你需要先开始Location编辑器 然后结束Location 最
  • .NET CORE WEB API 接受整数列表作为 HTTP GET API 中的输入参数

    我正在使用 net core 3 Web api 下面是我的操作的样子 它使用 HTTP GET 我想传递几个字段 其中一个字段是整数列表 HttpGet Route cities public ActionResult
  • 尝试用 C# 创建数学输入面板

    如何在 C 中创建数学输入面板 我尝试将其放入 dll 中并调用它 但它立即关闭 include
  • 我可以从命令行打印 html 文件(带有图像、css)吗?

    我想从脚本中打印带有图像的样式化 html 页面 谁能建议一个开源解决方案 我使用的是 Linux Ubuntu 8 04 但也对其他操作系统的解决方案感兴趣 你可以给html2ps http user it uu se jan html2
  • 使用字符串中的变量名称访问变量值,R

    Intro 一个数据集有大量的age year变量 age 1990 age 1991 etc 我有一个字符串值数组length age years 表示这些变量 使得age years 1 回报 age 1990 etc Need 我想搜
  • 在 macOS 上为 MoviePy 安装 ffmpeg 失败并出现 SSL 错误

    我正在尝试编写一个 Python 程序 在 Mac OS 10 11 16 上使用 MoviePy 将 MP4 文件转换为 GIF 我用 import moviepy editor as mp 我收到一条错误消息 说我需要打电话imagei
  • 如何将 MySQL 查询输出保存到 Excel 或 .txt 文件? [复制]

    这个问题在这里已经有答案了 如何将 MySQL 查询的输出保存到 MS Excel 工作表 即使只能将数据存储在 txt文件 就可以了 From 将 MySQL 查询结果保存到文本或 CSV 文件中 http www tech recipe
  • 如何通过减少请求来改进 AJAX 实时搜索

    我正在构建一个 AJAX 实时搜索页面 到目前为止 一切都按预期运行 但我注意到我正在进行大量的 AJAX 调用 我知道发生这种情况的地点和原因 但我找不到阻止这些 AJAX 调用发生的方法 我将尝试给出快速解释 然后粘贴下面的代码 在页面
  • Java Web 技术中的 AJAX 自动完成文本框(JSP 和 servlet)

    我需要您的帮助 了解如何使用 Java Web 技术 JSP Servlet 和 AJAX 使 HTML 输入文本元素像 Google 的 AJAX 搜索引擎 输入文本元素一样工作 下拉列表中的数据将来自数据库表 例如分别是 MySQL 或
  • 限制对记录的访问。基于声明的权限是个好主意吗

    在 net 基于声明的身份框架中 如果我想限制用户对某个帐户 特定帐户 123456 执行操作 查看或编辑 我说的是商业实体 例如银行帐户 创建索赔是个好主意吗对于他们可以查看或编辑的每个帐户 一组中有很多索赔有什么缺点吗 系统管理员可能有
  • Python 非贪婪正则表达式

    我如何制作一个像这样的Python正则表达式 这样 给定 a b c d e 蟒蛇匹配 b 代替 b c d 我知道我可以使用 代替 但我正在寻找一种更通用的解决方案 使我的正则表达式更加干净 有没有办法告诉python 嘿 尽快匹配这个
  • 使用组合 API 和 TypeScript 类型系统强类型化 vue 组件的 props

    我正在使用 vue 组合 api 和 typescript 如何使用打字稿输入系统强类型化组件属性 特洛伊 凯西尔的回答并不完全准确 我引用的文档definecomponent https vue composition api rfc n
  • IE 7 兼容模式中的 JQuery Unobtrusive 验证导致带有表单的页面出现“Member Not Found”错误

    最近 我在 Internet Explorer 中查看我的网站时注意到 JQuery 错误 该错误是源自 JQuery 源的 未找到成员 错误 我注意到单击了兼容模式按钮 取消单击此按钮修复了错误 但我不能假设我的网站的用户会如此乐于助人
  • 如何从嵌套的对象数组中获取每个父级的值

    所以我有多个对象数组 每个对象都包含一个子对象 e g const data id 1 name parent 1 children id c1 name child 1 children id g1 name grand 1 childr