奇葩数据处理（转树形结构）

已于 2022-04-12 17:48:12 修改
阅读量263 收藏 1
点赞数
分类专栏： javascript 文章标签： 前端开发 树形结构 接口处理 后端责任 数据转换
于 2021-12-15 21:18:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51431448/article/details/121961870
版权

调了一个后端的接口返回的数据是这样的：

开始我以为直接遍历展示就好了，他跟我说这个是树形结构。。。哪里像树形？？？

后端不处理，让我前端来处理。。。

就来记录一下，也想吐槽一下。这种不应该后端处理么？？

唉，乖乖的写吧。下面是写的一个方法：

会说法语的猪
关注
专栏目录
订阅专栏
对象数组转为树形结构
m0_51431448的博客
04-12 1463
第一种方式： /** * 树形数据转换 * @param {*} data list数据 * @param {*} id 主键ID * @param {*} pid 上级ID * @param childrenKey 子list数据的key */ function treeDataTranslate (data, id = 'id', pid = 'parentId', childrenKey = 'children') { let res = [] let temp = {} .
JavaScript中的扁平化数据转换为树形结构、树形结构扁平化数据
weixin_45803990的博客
08-20 2804
原始数据结构是 {id: 639, name: "好公司", type: 0, pId: 638, code: "1", domain: ""} {id: 640, name: "孩子", type: 0, pId: 639, code: "child", domain: ""} {id: 642, name: "孙子", type: 0, pId: 640, code: "1", domain: ""} {id: 645, name: "2", type: 0, pId: 640, code: "2
数据展示方式之树形展示+H5拖动效果
热门推荐
问白的博客
02-26 1万+
我们知道前端最重要的一部分就是如何将数据生动形象的展现给用户，数据展现的巧妙的话在加上H5的一些有意思的交互，说不定就会成为一个很有意思的页面了。常见的数据展示的方式如用表格可以展示很多数据，或者用z-tree展现上下级节点的数据，又或者用echart插件或者对d3对数据进行一些可视化处理，使得数据展现的更为直观丰富。今天来分享一下类似树结构的数据展示，是一颗倒立的树，根节点在最上面。这也是我以前...
纯JS 动态加载无限级树形结构tree到Table自动合并单元格
u013941372的博客
07-16 2163
有个奇葩？需求，要求把tree树形结构的数据显示到tabe上，因为级别不定包括上级的表格合并写起来还是有些难度的，所以给大家分享一下 先看一下成品 以下是json格式，可根据具体情况修改 { "result":{ "code":1, "data":{ "list":[ { "test":"01", "value":1,
html树纵向滚动,树形数据展示方式+H5拖动效果实例
weixin_35055546的博客
06-03 646
我们知道前端最重要的一部分就是如何将数据生动形象的展现给用户，数据展现的巧妙的话在加上h5的一些有意思的交互，说不定就会成为一个很有意思的页面了。常见的数据展示的方式如用表格可以展示很多数据，或者用z-tree展现上下级节点的数据，又或者用echart插件或者对d3对数据进行一些可视化处理，使得数据展现的更为直观丰富。今天来分享一下类似树结构的数据展示，是一颗倒立的树，根节点在最上面。这也是我以前...
【高级数据结构】深度剖析树状数组
Jefferyz070607的博客
12-08 962
深度刨析了树状数组的本质，适合初学者快速进阶树状数组。
奇葩需求，将json字符串转换映射到某种父子结构id,pid的树形结构数组存入数据库
monkeyhi的博客
11-23 554
将json转换为每个节点用 code、pcode标识的一个树形结构的数组数据，方便存入数据库操作节点的值，同时本文也提供了将该树形结构的数组数据重新还原成json字符串
Labview树形控件加复选框
bgbgx的博客
10-07 1万+
不知是自己不会找资源，还是自己需求太奇葩，才学Labview一段时间，总是碰到各种问题，在网上又总是还找不到合适的解决方案，无奈只有自己硬着头皮怼了。 现在的需求是我要采集很多的数据用来画图，但是有时候并不想所有曲线都能画出来，所以需要给用户提供一个可以选择曲线的接口，最开始想到的当然是波形图自带的图例去处理，但是试过效果并不是太好，数据太多的话层次不分明，用户需要在一大堆数据中拖动滚动条去找到需...
[数据结构复习]查找
Dawn-K の Blog
12-20 488
查找 文章目录查找概述线性表查找顺序查找改进后的顺序查找优点缺点折半查找条件基本思想实现折半查找判定树定义构造性能分析索引顺序查找查找过程要求树表查找动态查找表的特点二叉排序树性质查找路径插入构造删除三种情况删除叶子节点删除有一棵子树的节点删除有两棵子树的节点性能分析平衡二叉树定义基本思想调整性能B-树定义&&查找散列表基本思想散列函数数字分析法折叠法除留余数法随机数法总结冲突处理...
go.js实现表格树形连接
10-03
2. **树形结构（Tree Structure）**：树形结构的实现依赖于`TreeModel`，它管理着节点间的父子关系。通过`TreeModel`，我们可以添加、删除和更新节点，以及获取树的结构信息。在Go.js中，可以设置`isTreeExpanded`...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 823
Vue 2 中使用 Vue I18n 插件实现中英文切换
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 402
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 558
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1150
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
如何使用Redisson的布隆过滤器？
最新发布
付聪
10-02 294
【代码】如何使用Redisson的布隆过滤器？
深入理解 Nuxt.js 中的 app:data:refresh 钩子
09-29 1307
钩子在数据被刷新时触发，可以选择性地传入要刷新的键名（keys）。这为开发者提供了一个灵活的机制来响应数据变化，并进行必要的更新。Nuxt.js 中的钩子的用途及其实现方法。这个钩子为开发者提供了一种灵活的方式来处理数据的更新，从而优化应用的响应性和用户体验。
【开源免费】基于SpringBoot+Vue.JS校园资料分享平台（JAVA毕业设计）
customer08的博客
09-30 1149
校园资料分享平台是一个B/S模式系统，采用Spring Boot框架作为开发技术，MYSQL数据库设计开发，充分保证系统的稳定性。系统具有界面清晰、操作简单，功能齐全的特点，使得校园资料分享平台管理工作系统化、规范化。
React响应式修改数组和对象
警警的博客
09-30 726
React的状态是不可变的，这意味着你不能直接修改状态对象中的数组元素，而是需要创建一个新的数组来更新状态。你不能直接修改对象中的属性，而是需要创建一个新的对象来更新状态。不可变性（Immutability）：React中的状态是不可变的，这意味着你不能直接修改状态对象中的数组元素，而是需要创建一个新的数组来更新状态。避免直接修改状态：React的状态是不可变的，直接修改状态（如this.state.items.push(4)）不会触发重新渲染，因为React无法检测到这种变化。// 修改name属性。
chatgpt奇葩问题回答
09-17
ChatGPT是一个基于人工智能的聊天机器人，它可以通过学习海量数据来进行自然语言理解和生成回复。然而，由于它的工作原理，有时它可能会给出一些奇葩的回答。 这是因为ChatGPT是通过大规模训练来学习生成回复的，它可以通过模式识别和语言理解来提供合理的回答。然而，它并没有一种内在的理解认知能力，所以在回答问题时可能会出现一些奇葩的回答。 例如，当被问到一些常识性的问题时，ChatGPT可能会给出一些奇葩的回答，因为它无法真正理解问题的意义。它只是通过统计学习和模式匹配来给出回复，并没有真正的推理能力。 另外，由于它的训练数据是来源于互联网，那么它可能会被一些错误或者不准确的信息所影响。这意味着有时候它可能会给出一些不准确的答案或者奇怪的回复。 尽管ChatGPT在某些方面表现出令人惊讶和有趣的能力，但我们仍然需要谨慎对待它的回答。它的回答只是基于数据和模式的统计结果，并没有真正的智能。使用ChatGPT时，我们需要对其回答保持批判和判断，并考虑到其局限性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

会说法语的猪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值