如何使用JS递归渲染嵌套JSON数据为树状列表?

如何使用JS递归渲染嵌套JSON数据为树状列表?

利用javascript递归函数将嵌套json数据渲染成树状列表

本文介绍如何使用JavaScript递归函数将嵌套JSON数据渲染为树状列表。 以下代码片段展示了改进后的实现方法:

function treeNodeWrite(root, array) {    $.each(array, function(key, val) {        let el = $('
  • '); // 创建列表项元素 el.text(val.name); // 设置列表项文本 root.append(el); // 将列表项添加到父元素 if (val.cns) { // 检查是否存在子节点 let r = $('
      '); // 创建子列表元素 treeNodeWrite(r, val.cns); // 递归调用函数处理子节点 el.append(r); // 将子列表添加到父列表项 } });}

      此代码直接创建

      • 元素,并通过递归调用treeNodeWrite函数处理嵌套的JSON数据。 这避免了对特定容器元素的依赖,使其更具通用性。 最终生成的树状列表结构如下所示:

      • node-root
      • node 1
      • node 2
      • node 2-1
      • node 2-2
      • node 2-2-1
      • node 2-2-2
      • node 2-2-3
      • node 2-3
      • node 3

        该方法清晰地展示了递归处理嵌套JSON数据的逻辑,并提供了更简洁、易于理解的代码结构。

        以上就是如何使用JS递归渲染嵌套JSON数据为树状列表?的详细内容,更多请关注创想鸟其它相关文章!

        版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
        如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
        发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1561303.html

      • (0)
        打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
        上一篇 2025年12月22日 06:23:10
        下一篇 2025年12月22日 06:23:18

        相关推荐

        • GitLab如何通过Rails路由实现项目名路径?

          gitlab项目路径中的项目名是如何实现的? GitLab的路径并非基于Vue Router,而是采用Ruby on Rails的路由系统。 虽然GitLab的Web界面自2016年起已使用Vue.js重构,但其底层路由机制仍然依赖于Rails。要理解其项目名路径的实现,需要参考Rails的路由配置…

          好文分享 2025年12月22日
          000
        • Axios POST请求传参异常:如何正确发送JSON格式数据?

          解决axios post请求json数据传输异常 在使用Axios发送POST请求时,如果参数以逗号拼接的方式出现在URL中,则表示JSON数据传输存在问题。 本文将指导您如何正确发送JSON格式数据。 关键在于:必须设置正确的HTTP请求头Content-Type为”application/jso…

          2025年12月22日
          000
        • 图片上传与表单提交同时进行时如何保证新增接口获取到图片数据?

          点击保存时接口执行顺序问题 在点击保存后,执行表单提交和调用新增接口。但由于同时有一个图片上传字段,导致新增接口在保存时获取不到上传图片的值。为了解决这个问题,开发者在新增接口中添加了 setTimeout。 为了进一步提高解决效率,可以在图片上传接口返回结果后,再调用新增接口。具体实现如下: 将图…

          好文分享 2025年12月22日
          000
        • 小程序列表渲染:列表样式是否需要循环处理?

          小程序列表渲染:样式条件渲染 在小程序开发中,如果列表项需要根据不同的状态显示不同的样式,则需要使用条件渲染来处理列表样式。 直接在循环中为每个列表项设置样式是不必要的,并且效率较低。 更有效的方法是利用条件渲染机制,根据数据状态动态地应用不同的 CSS 类。 我们可以使用 WXML 的 wx:if…

          2025年12月22日
          000
        • contenteditable 元素光标位置为何不稳定?

          html contenteditable 元素的光标位置问题 HTML 的 contenteditable 属性赋予元素可编辑性,但其光标位置却常常难以预测。 例如,光标有时会出现在元素文本的起始位置,即使插入文本不应该继承元素样式,但实际情况并非如此。 HTML5 规范指出,contentedit…

          2025年12月22日
          000
        • 点击span标签却触发了input的click事件?

          点击span标签触发input点击事件的原因及解决方法 您的代码中,span 元素被包含在一个 label 元素内,而该 label 元素又关联了一个 input 元素。 这是导致点击 span 也会触发 input 的 click 事件的根本原因。 这是HTML规范中 label 元素的标准行为:…

          2025年12月22日
          000
        • 如何使用Lodash的debounce方法防止TypeScript类方法频繁触发?

          有效避免typescript类方法频繁调用的技巧:lodash的debounce方法 在TypeScript开发中,为了防止类方法被过度频繁调用,我们可以借助Lodash强大的debounce方法。以下步骤演示如何在TypeScript类中应用debounce: 导入debounce方法: impo…

          2025年12月22日
          000
        • 如何在JS Class类的方法中正确使用debounce并保证this指向?

          在javascript类方法中正确使用防抖函数并确保this指向 在JavaScript类的方法中使用防抖函数(debounce)时,需要确保this的正确指向。 以下代码演示了如何使用lodash库中的debounce函数并正确绑定this: import { debounce } from ‘l…

          2025年12月22日
          000
        • 如何高效渲染列表项并根据状态动态设置样式?

          高效渲染列表项并动态设置样式 本文介绍如何高效渲染列表项并根据状态动态设置样式,以实现类似下图所示的效果: 循环渲染列表项 要实现这种动态样式效果,需要循环遍历列表中的每一项。循环遍历是一种编程技术,用于依次访问列表中的每个元素并执行特定操作。在本例中,列表元素是图像,操作是根据图像状态设置不同的样…

          2025年12月22日
          000
        • Vue数组排序:如何根据一个数组的uid字段重新排列另一个数组?

          vue 数组对比调整顺序 如何根据 arr1 中 uid 字段对 arr2 中的对象进行重新排序,使 arr2 中的对象与 arr1 中对象的 uid 保持一致? 问题示例: 已有 arr1 和 arr2 两组数据: let arr1 = [ { uid: 1638867875084, }, { u…

          好文分享 2025年12月22日
          000
        • 小程序列表循环渲染中如何根据子项状态控制显示样式?

          小程序列表循环渲染:动态控制子项样式 本文介绍如何在小程序中,根据子项状态动态调整列表项的显示样式,例如图片示例所示。 为了实现灵活的样式控制,我们将结合 wx:for 循环和条件渲染技术。 假设列表数据 itemList 中每个子项都包含一个 status 属性,用于指示子项的状态(例如:已完成、…

          2025年12月22日
          000
        • 重叠框体点击事件冲突如何解决?

          解决重叠元素点击事件冲突 问题: 网页中多个元素重叠,点击重叠区域时难以确定触发哪个元素的点击事件。 方案: 此问题通常由元素定位导致重叠顺序与文档流顺序不符引起。 解决方法是,为最上层(重叠)的元素添加以下CSS样式,使其忽略指针事件: pointer-events: none; 应用pointe…

          2025年12月22日
          000
        • 如何用JavaScript实现图文交错的异型网页布局?

          javascript 异型布局挑战 本文探讨如何使用 JavaScript 创建如上图所示的图文交错、非矩形网页布局。 传统 JavaScript 布局方法难以实现这种效果,因为网页元素通常是矩形,难以自由变形。 实现策略 有效的解决方案结合了浮动和图片裁剪技术: CSS 浮动 (float): 使…

          2025年12月22日
          000
        • 如何根据一个数组的键值调整另一个数组的顺序?

          vue 数组根据指定键值调整顺序 给定两个数组 arr1 和 arr2,其中 arr1 的每个元素都有一个唯一的 uid 键。现在需要根据 arr1 中 uid 的顺序调整 arr2 的顺序。 解决方法: arr1.map(item => arr2.find(item2 => item.…

          好文分享 2025年12月22日
          000
        • contenteditable元素中,光标究竟该如何准确放置?

          contenteditable元素光标定位规则详解 在使用contenteditable属性的元素中,光标的精确位置受特定规则约束。 光标位置规则 光标无法定位于非文本节点内部,例如图像标签或换行符等元素。光标可定位于文本节点内部或其边界。若光标位于元素边界,则其位置将遵循HTML结构。 示例说明:…

          2025年12月22日
          000
        • 如何解决重叠div元素的鼠标点击事件冲突问题?

          巧妙解决重叠div元素的点击事件冲突 在网页开发中,多个div元素重叠时,常常出现点击事件冲突,导致点击效果与预期不符。本文将提供一种有效的解决方案,确保点击事件精准触发目标元素。 问题:点击事件错位 假设页面上有三个重叠的div,一个大的div包含两个小的div,HTML结构如下: CSS样式如下…

          2025年12月22日
          000
        • $.slideToggle()动画执行中如何立即判断元素的展开状态?

          实时监测$.slidetoggle()动画状态 使用jQuery的$.slideToggle()方法控制元素的显示和隐藏时,直接判断其展开状态并非易事,因为动画的回调函数并非即时执行。 本文提供一种解决方案,无需等待动画完成即可获取元素的当前状态。 巧妙的标记法 我们采用添加自定义类的方式来标记元素…

          2025年12月22日
          000
        • Flex 布局中,子元素高度设置如何影响父元素布局方向改变?

          flex 布局中子元素高度对父元素布局方向的影响及解决方案 本文探讨了在 Flex 布局中,子元素高度设置如何影响父元素布局方向改变的问题,并提供了解决方案。 问题描述: 当 Flex 容器包含设置了高度的子元素,并改变容器的flex-direction属性(例如从row改为column)时,可能会…

          2025年12月22日
          000
        • a标签设置字体大小后为何出现顶部空隙?

          a标签设置字体大小后出现顶部间距的原因及解决方法 为标签设置font-size: 12px后,有时会在标签顶部出现意料之外的间距。这是由于浏览器对行内元素(inline element)的基线对齐机制导致的。当标签与其他元素(例如段落 )的字体大小不同时,浏览器会尝试根据基线对齐,从而产生间距。 解…

          2025年12月22日
          000
        • 如何在不刷新页面的情况下实现首页菜单切换?

          巧用ajax实现首页菜单无刷新切换 本文介绍一种无需页面刷新的首页菜单切换方法,适用于HTML环境。 该方法通过AJAX技术在指定DIV容器内动态加载页面内容,避免了整个页面的重新加载,提升用户体验。 虽然Vue或React等框架提供了更完善的路由方案,但对于简单的场景,AJAX方法同样高效便捷。 …

          2025年12月22日
          000

        发表回复

        登录后才能评论
        关注微信