打印从根节点到叶节点的所有路径 - javascript

2024-03-22

    function formCategoryTrees(object) {
     _.each(object,function(objectValues){


         var leafCategoryId = objectValues["id"];
         var leafCategoryName =  objectValues["name"];
         console.log(leafCategoryName+""+leafCategoryId );
        if (objectValues.hasOwnProperty("children")) {
            if (typeof objectValues["children"] == 'object')
                 console.log("In");
                formCategoryTrees(objectValues["children"]);
            }else{
console.log(leafCategoryName);
            }

      })

  }

所以我想显示类别树如下:手机及配件 -> 手机

手机及配件 -> 充电器

我的 JS 小提琴:http://jsfiddle.net/tfa8n5tj/ http://jsfiddle.net/tfa8n5tj/


See http://jsfiddle.net/sjmcpherso/kc9fehyz/ http://jsfiddle.net/sjmcpherso/kc9fehyz/在这里,我使用递归和迭代创建了一组分层的列表元素。由于在循环中操作 DOM 会极大地影响性能,因此我创建了一个虚拟 DOM,并在过程结束时附加到真实 DOM。

var vDOM = document.createDocumentFragment(); //Create a Document Fragment to store your Virtual DOM
function formCategoryTrees(object,par) { //Use the parent node as a parameter to create hierarchy
   var ul = document.createElement('ul');
   _.each(object,function(objectValues ){       
        var li = document.createElement('li');
        var leafCategoryId = objectValues["id"];
        var leafCategoryName =  objectValues["name"]; 
        li.appendChild(document.createTextNode(leafCategoryName + " " + leafCategoryId));

        if(objectValues["children"]) {      
                formCategoryTrees(objectValues["children"],li);
        }
        ul.appendChild(li);

    })    
    par.appendChild(ul);  //Append to the parent node after each iteration
}
formCategoryTrees(object.records,vDOM);
document.body.appendChild(vDOM); //Append your Virtual DOM to your page
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

打印从根节点到叶节点的所有路径 - javascript 的相关文章

  • Javascript - 模板字符串不能漂亮地打印对象

    我可以使用 ES6 模板字符串来漂亮地打印 javascript 对象吗 这是来自 React Native 项目 其中console log 输出到 Chrome 调试工具 我想要的是 const description App open
  • 解决方案:动态加载独立编译的 Webpack 2 包 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我想分享如何捆绑一个充当插件主机以及它如何加载已安装的插件动态地 应用程序和插件都与 Webpack 捆绑在一起 应用程序和插件被编译和分
  • 无法实现模块模式

    我正在尝试重现 Douglas Crockford 所著的 Javascript The Good Parts 一书中的一些代码 这个想法是使用闭包进行对象封装并避免Javascript固有的全局变量 var serial maker fu
  • 没有函数或 json 的 JavaScript 大括号

    刚刚打开客户端的 javascript 文件 第一行是这样的 var s account blog 我不明白 通常 根据我的经验 花括号包裹着一个函数 function welcome or a json JavaScript object
  • 检查复选框是否被选中? [复制]

    这个问题在这里已经有答案了 如何通过 jQuery 检查复选框是否被选中 我可以只向元素添加 ID 或类并执行此操作吗 if element val 1 do stuff if element is checked checkbox is
  • CSS 比例和方形中心裁剪图像

    所以我的应用程序中有一个缩略图集合 其大小为200x200 有时原始图像没有这个比例 所以我计划将此图像裁剪为正方形 目前它只是拉伸图像以适合缩略图 所以说我的原始图像大小是400x800 那么图像看起来就很压扁 我想裁剪此图像 以便它查看
  • jQuery 无法在外部 JavaScript 中工作

    我是 jQuery 新手 遇到了一些奇怪的问题 我正在使用 jQuery 的change and click方法 在我的 HTML 文件中使用时它们工作正常
  • jQuery 模式窗口从我的表单中删除元素

    jQuery 当我用它创建一个包含表单元素的模式窗口时 当我提交表单时 它会取出这些元素 表格示例
  • 为什么 foo.hasOwnProperty('__proto__') 等于 false?

    var foo bar 5 Why is foo hasOwnProperty proto 等于false 它不能来自原型链中更高层的任何对象 因为它是特定于这个对象的 EDIT 有些答案说它已开启Object prototype 但我不明
  • Firefox(仅限)动态表单操作不起作用

    控制台为操作属性返回空白 我已经移动了 file upload attr action io cfm action updateitemfile item id agenda modal attr data defaultitemid 周围
  • 使用javascript向url添加哈希而不滚动页面?

    在不滚动页面的情况下向 url 添加哈希 使用 JavaScript 我打开页面 我向下滚动 我单击添加哈希的链接 可能带有值 test 示例 http www example com test http www example com t
  • WaveSurfer JS 无法在 Firefox 中为特定的 mp3 音频文件生成图表

    我们面临着在 Firefox 中使用 wavesurfer JS 对某些特定格式的 mp3 文件绘制音频可视化 图表 的问题 它总是给我们这样的错误 传递给decodeAudioData 的缓冲区包含未知的内容类型 但同一个文件在 chro
  • 有没有等效的 gulp 插件来执行“grunt Bower”?

    With grunt 我可以使用命令grunt bower 由 提供grunt bower requirejs https github com ck86 gulp bower files 自动生成RequireJS我本地的配置文件bowe
  • Javascript:打乱数组中的对象组

    我有一个对象数组 我已按键排序 group如下 使得所有具有相同值的对象group在索引中彼此相邻data 例如 var data foo cat group house foo cat group house foo cat group
  • JSLint 错误:意外的“这个”

    无法理解为什么 JSLint 对我的使用感到惊讶this在下面的代码中 function testConstr x use strict this joker Whyyy sooo seriousss this x x 对于这两个属性分配
  • 检测 iPad Safari 用户的最佳方法

    添加用于检测 iPad Safari 用户的代码的最佳方法是什么 我的意思是我们应该使用 1 CSS 通过链接媒体 2 JS 通过navigator对象 我听说使用用户代理字符串并不是检测 iPad 的最佳方法 因为存在不一致的情况 请建议
  • 如何像在浏览器中一样检索准确的 HTML

    我正在使用 Python 脚本来呈现网页并检索其 HTML 它适用于大多数页面 但对于其中一些页面 检索到的 HTML 不完整 我不太明白为什么 这是我用来废弃此页面的脚本 由于某种原因 每个产品的链接不在 HTML 中 Link http
  • FB.getLoginStatus() 不起作用

    我正在尝试编写一段代码来检查用户是否登录 发现FBJS API中有一个内置方法 叫做getLoginStatus 我已经在html中实现了它 但出于某种原因 getLoginStatus 内部的alert 不会被触发 我也尝试在 init
  • 如何缩放到高图中的特定点

    Highmaps highcharts 是一个 javascript jquery 适配器 可在浏览器等中呈现地图 我有一张突出显示单个国家 地区的地图 但是 世界 地图的比例如此之大 因此我想在将地图加载到相关国家 地区后进行放大 看看
  • 为什么 [].push([]) 返回 1? [复制]

    这个问题在这里已经有答案了 为什么这会返回 1 push outputs 1 push 返回数组的新长度 one push two returns 2 array length is 2 one two push something ret

随机推荐

  • 如何聚焦未停靠的 Chrome 调试窗口的相应选项卡?

    在开发时 我经常在 Chrome 浏览器中打开很多选项卡 我总是在单独的窗口中使用未固定的 Chrome DevTools 假设我已经打开给定选项卡的 DevTools 然后在另一个选项卡中对 SO 进行了一些搜索 那么 如果我再次聚焦 C
  • 我可以解析外部网页的目录列表吗?

    是否可以解析外部网页的目录列表 因为该网页是可访问的 并且当我访问它时它会显示文件列表 我只想知道是否可以在 PHP 中动态解析文件以及如何解析 谢谢 抱歉不清楚 我的意思是目录列表 例如 http www ibiblio org pub
  • JComboBox 弹出菜单不出现

    我在 JPanel 中有一个 JComboBox 它本身嵌套在其他几个 JPanel 中 它填充了枚举的成员 我遇到了一个问题 当我单击展开按钮时 弹出菜单不会出现 以下是我迄今为止收集到的信息 1 第一次点击展开按钮没有任何反应 第二次单
  • LINQ 基于 IList 从 IList 中删除某些元素 [重复]

    这个问题在这里已经有答案了 如何使用 LINQ 从一个基于另一个 IList 的 IList 中删除某些元素 我需要从 list1 中删除 ID 出现在 list2 中的记录 下面是代码示例 class DTO Prop int ID Pr
  • 如何在 Windows 10 Universal 中获取设备的唯一标识符?

    这是我为 Windows Universal 8 1 获取唯一 DeviceID 的旧实现 但 HardwareIdentification 类型不再存在 private static string GetId var token Hard
  • 如何在android应用程序中从twitter获取用户信息?

    我正在将 Twitter 集成到我的 Android 应用程序中 我可以为用户授权该应用程序 现在 我正在寻找一个 API 它可以为我提供登录用户的信息 如名字 姓氏 电子邮件等 我已经为 Facebook 做了这个 facebook re
  • Java中如何查找未关闭的I/O资源?

    Java 中的许多 I O 资源 例如 InputStream 和 OutputStream 在使用完毕后需要关闭 如前所述here http www coderanch com t 202922 Performance java Uncl
  • Matlab中如何imwarp转点?

    我正在使用 Matlab 将图像转换为目标图像 我有几何变换 tform 例如这是我的 tform 1 0235 0 0022 0 0607 0 0 0276 1 0002 0 0089 0 0 0170 0 0141 1 1685 0 1
  • 如何将 openssl-sys 箱静态链接到共享库?

    我正在使用一个依赖于的库openssl 系统 https github com sfackler rust openssl 根据文档 如果我指定OPENSSL STATIC 1作为环境变量 OpenSSL 将静态链接到共享库输出中 Due
  • WinForms 多线程:仅当前一个更新完成时才执行 GUI 更新

    我有带有一些后台处理的多线程应用程序 它有长时间运行的 UI 更新 在 UI 线程本身上 它们是通过众所周知的从后台线程调用的MSDN 上的资源 http msdn microsoft com en us library 757y83z4
  • 用颜色填充图像但保留 Alpha(PIL 中的颜色叠加)

    基本上 我正在尝试创建一个函数来获取给定的图像和颜色 对于图像中的每个像素 它将保留原始 alpha 值 但会将颜色更改为给定的颜色 例如 如果函数获取下面的箭头图像和红色 它将输出以下图像 在 Photoshop 和其他图像编辑器中 这种
  • 从函数创建矩阵

    我想从函数创建一个矩阵 这样 3 3 如果行索引小于给定阈值 k 则矩阵 C 的值等于 1 import numpy as np k 3 C np fromfunction lambda i j 1 if i lt k else 0 3 3
  • “NSPercientContainer”仅在 iOS 10.0 或更高版本上可用

    我是 iOS 应用程序开发新手 我开发了一个应用程序 在用户登录时显示一个网站 它适用于设置为 10 1 的部署目标 为了使其与 IOS 8 兼容 我尝试将部署目标设置为 8 因为我遇到了以下错误 NSPersistentContainer
  • 控制线段

    这是一个简单的问题 我一直在成功使用 d3 svg line 生成器 但我现在需要能够对整条线中的每个单独段进行更多控制 例如 每个部分可能需要不同的颜色 或者每个片段甚至可能需要不同的厚度 根据相邻片段的厚度逐渐变细或变细 我想知道实现这
  • TFS 中的搁置是什么?

    在 TFS 中搁置仅仅是一种软签入 以便其他团队成员可以看到源代码吗 即搁置的代码不会被编译 对吗 货架有很多用途 主要有 上下文切换 保存当前任务的工作 以便您可以切换到另一个高优先级任务 假设您正在开发一项新功能 只顾自己的事 这时您的
  • 什么是 := 运算符?

    在某些编程语言中 我看到 例如 x y 这是什么 运算符通常被称为 它有什么作用 在所有支持运算符的语言中 这意味着分配 在支持运算符的语言中 the 运算符通常表示相等比较 在语言中 意味着赋值 通常用于相等比较 does mean 我不
  • javascript:动态更改名称属性

    我正在处理这个脚本 它没有错误 但我想在上面添加一些功能 就像当我单击它添加的按钮时一样 但我希望输入文本的名称属性也被更改 这是我的脚本 javascript var a 1 function add var fContent docum
  • 有没有办法使用 Selenium Webdriver (firefox) 记录 http 请求/响应?

    有没有办法使用 Selenium Webdriver firefox 记录 http 请求 响应 我想可以通过代理驱动网络流量并记录它 但也许有更简单的 内部 硒解决方案 在 selenium 频道上问了这个问题 您将需要代理它来捕获请求
  • Android Intent:发送带有附件的电子邮件

    我想通过电子邮件发送多个文件 我找到了这个Android 使用 Intent 实现多个电子邮件附件 https stackoverflow com questions 2264622 android multiple email attac
  • 打印从根节点到叶节点的所有路径 - javascript

    function formCategoryTrees object each object function objectValues var leafCategoryId objectValues id var leafCategoryN