JSON剥空心菜（用JS遍历JSON所有节点，在控制台打印用户友好的JSON结构树）

最新推荐文章于 2022-01-16 11:40:55 发布
最新推荐文章于 2022-01-16 11:40:55 发布
阅读量1k 收藏 1
点赞数 2
分类专栏： 经验教训 文章标签： JSON结构树 JavaScript 遍历 递归 用户友好
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32337527/article/details/80768195
版权

项目需要，要遍历以下JSON数据，以可读性好的方式展示给用户。

var request = {
    "sheet": {
        "一般体格检查及生命体征": [
            {
                "清点器械": true,
                "自我介绍": true,
                "观察一般状态": {},
                "洗手消毒": true
            },
            {
                "测体温": {
                    "status": true,
                    "duration": {
                        "value": 10,
                        "unit": "min"
                    }
                },
                "测血压": true,
                
                // 至少30秒，注意两侧对比
                "测脉搏": true,

                "呼吸": true
            }
        ],
        "头颈部": [
            {
                "观察头部": {
                    "头部外形": "正常",
                    "毛发分布": "正常",
                    "异常运动": {}
                },
                "触诊头颅": {}
            },
            {
                "视诊": {
                    "双眼": {},
                    "眉毛": {}
                },
                "检查": {
                    "下睑结膜": {},
                    "球结膜": {},
                    "巩膜": {}
                },
                "翻转上睑": {
                    "检查": {
                        "上睑结膜": {},
                        "球结膜": {},
                        "巩膜": {}
                    }
                },

                // 6 个方向
                "眼球运动": ["左","左上","左下","右","右上","右下"],
                "眼球震颤": false,
                "对光反射": ["直接","间接"],
                "集合反射": true
            },
            {
                "视诊": ["外耳","外耳道"],
                "触诊": ["耳廓","乳突"]
            },
            {
                "视诊": ["外鼻","鼻前庭","鼻中隔"],
                "触诊": ["外鼻"],
                "压痛": ["上颌窦","额窦","筛窦"]
            },
            {
                "视诊": ["口","唇","牙齿","上颚","舌质","舌苔"],
                "借助压舌板观察": ["颊粘膜","牙齿","牙龈","口底"],
                "口咽部": true,
                "扁桃体": true
            },
            {
                "视诊": {
                    "颈部": ["外形","皮肤","颈静脉充盈","颈动脉搏动"]
                },
                "颈部活动": true,
                "触诊": {
                    "颈部淋巴结": ["耳前","耳后","枕后","颌下","颏下","颈前","颈后","锁骨上"],
                    "甲状腺": {},
                    "颈动脉": {},
                    "气管位置": {}
                }
            }
        ],
        "前侧胸部": {
            "肺部": {
                "视诊": {
                    "胸廓": ["外形","对称性","皮肤"],
                    "呼吸": ["运动","频率","节律","深度"]
                }
            },
            "心脏": {}
        },
        "背部（病人坐起）": {},
        "腹部（病人躺下）": {},
        "上肢": {},
        "下肢": {},
        "神经反射": {},
        "步态与腰椎运动": {}
    }
}


最终效果应该要类似下面这样子：

|    1 一般体格检查及生命体征
|    |    1.1
|    |    |    1.1.1 清点器械
|    |    |    |    true
|    |    |    1.1.2 自我介绍
|    |    |    |    true
|    |    |    1.1.3 观察一般状态
|    |    |    1.1.4 洗手消毒
|    |    |    |    true
|    |    1.2
|    |    |    1.2.1 测体温
|    |    |    |    1.2.1.1 status
|    |    |    |    |    true
|    |    |    |    1.2.1.2 duration
|    |    |    |    |    1.2.1.2.1 value
|    |    |    |    |    |    10
|    |    |    |    |    1.2.1.2.2 unit
|    |    |    |    |    |    min
|    |    |    1.2.2 测血压
|    |    |    |    true
|    |    |    1.2.3 测脉搏
|    |    |    |    true
|    |    |    1.2.4 呼吸
|    |    |    |    true
|    2 头颈部
|    |    2.1
|    |    |    2.1.1 观察头部
|    |    |    |    2.1.1.1 头部外形
|    |    |    |    |    正常
|    |    |    |    2.1.1.2 毛发分布
|    |    |    |    |    正常
|    |    |    |    2.1.1.3 异常运动
|    |    |    2.1.2 触诊头颅
|    |    2.2
|    |    |    2.2.1 视诊
|    |    |    |    2.2.1.1 双眼
|    |    |    |    2.2.1.2 眉毛
|    |    |    2.2.2 检查
|    |    |    |    2.2.2.1 下睑结膜
|    |    |    |    2.2.2.2 球结膜
|    |    |    |    2.2.2.3 巩膜
|    |    |    2.2.3 翻转上睑
|    |    |    |    2.2.3.1 检查
|    |    |    |    |    2.2.3.1.1 上睑结膜
|    |    |    |    |    2.2.3.1.2 球结膜
|    |    |    |    |    2.2.3.1.3 巩膜
|    |    |    2.2.4 眼球运动
|    |    |    |    2.2.4.1
|    |    |    |    |    左
|    |    |    |    2.2.4.2
|    |    |    |    |    左上
|    |    |    |    2.2.4.3
|    |    |    |    |    左下
|    |    |    |    2.2.4.4
|    |    |    |    |    右
|    |    |    |    2.2.4.5
|    |    |    |    |    右上
|    |    |    |    2.2.4.6
|    |    |    |    |    右下
|    |    |    2.2.5 眼球震颤
|    |    |    |    false
|    |    |    2.2.6 对光反射
|    |    |    |    2.2.6.1
|    |    |    |    |    直接
|    |    |    |    2.2.6.2
|    |    |    |    |    间接
|    |    |    2.2.7 集合反射
|    |    |    |    true
|    |    2.3
|    |    |    2.3.1 视诊
|    |    |    |    2.3.1.1
|    |    |    |    |    外耳
|    |    |    |    2.3.1.2
|    |    |    |    |    外耳道
|    |    |    2.3.2 触诊
|    |    |    |    2.3.2.1
|    |    |    |    |    耳廓
|    |    |    |    2.3.2.2
|    |    |    |    |    乳突
|    |    2.4
|    |    |    2.4.1 视诊
|    |    |    |    2.4.1.1
|    |    |    |    |    外鼻
|    |    |    |    2.4.1.2
|    |    |    |    |    鼻前庭
|    |    |    |    2.4.1.3
|    |    |    |    |    鼻中隔
|    |    |    2.4.2 触诊
|    |    |    |    2.4.2.1
|    |    |    |    |    外鼻
|    |    |    2.4.3 压痛
|    |    |    |    2.4.3.1
|    |    |    |    |    上颌窦
|    |    |    |    2.4.3.2
|    |    |    |    |    额窦
|    |    |    |    2.4.3.3
|    |    |    |    |    筛窦
|    |    2.5
|    |    |    2.5.1 视诊
|    |    |    |    2.5.1.1
|    |    |    |    |    口
|    |    |    |    2.5.1.2
|    |    |    |    |    唇
|    |    |    |    2.5.1.3
|    |    |    |    |    牙齿
|    |    |    |    2.5.1.4
|    |    |    |    |    上颚
|    |    |    |    2.5.1.5
|    |    |    |    |    舌质
|    |    |    |    2.5.1.6
|    |    |    |    |    舌苔
|    |    |    2.5.2 借助压舌板观察
|    |    |    |    2.5.2.1
|    |    |    |    |    颊粘膜
|    |    |    |    2.5.2.2
|    |    |    |    |    牙齿
|    |    |    |    2.5.2.3
|    |    |    |    |    牙龈
|    |    |    |    2.5.2.4
|    |    |    |    |    口底
|    |    |    2.5.3 口咽部
|    |    |    |    true
|    |    |    2.5.4 扁桃体
|    |    |    |    true
|    |    2.6
|    |    |    2.6.1 视诊
|    |    |    |    2.6.1.1 颈部
|    |    |    |    |    2.6.1.1.1
|    |    |    |    |    |    外形
|    |    |    |    |    2.6.1.1.2
|    |    |    |    |    |    皮肤
|    |    |    |    |    2.6.1.1.3
|    |    |    |    |    |    颈静脉充盈
|    |    |    |    |    2.6.1.1.4
|    |    |    |    |    |    颈动脉搏动
|    |    |    2.6.2 颈部活动
|    |    |    |    true
|    |    |    2.6.3 触诊
|    |    |    |    2.6.3.1 颈部淋巴结
|    |    |    |    |    2.6.3.1.1
|    |    |    |    |    |    耳前
|    |    |    |    |    2.6.3.1.2
|    |    |    |    |    |    耳后
|    |    |    |    |    2.6.3.1.3
|    |    |    |    |    |    枕后
|    |    |    |    |    2.6.3.1.4
|    |    |    |    |    |    颌下
|    |    |    |    |    2.6.3.1.5
|    |    |    |    |    |    颏下
|    |    |    |    |    2.6.3.1.6
|    |    |    |    |    |    颈前
|    |    |    |    |    2.6.3.1.7
|    |    |    |    |    |    颈后
|    |    |    |    |    2.6.3.1.8
|    |    |    |    |    |    锁骨上
|    |    |    |    2.6.3.2 甲状腺
|    |    |    |    2.6.3.3 颈动脉
|    |    |    |    2.6.3.4 气管位置
|    3 前侧胸部
|    |    3.1 肺部
|    |    |    3.1.1 视诊
|    |    |    |    3.1.1.1 胸廓
|    |    |    |    |    3.1.1.1.1
|    |    |    |    |    |    外形
|    |    |    |    |    3.1.1.1.2
|    |    |    |    |    |    对称性
|    |    |    |    |    3.1.1.1.3
|    |    |    |    |    |    皮肤
|    |    |    |    3.1.1.2 呼吸
|    |    |    |    |    3.1.1.2.1
|    |    |    |    |    |    运动
|    |    |    |    |    3.1.1.2.2
|    |    |    |    |    |    频率
|    |    |    |    |    3.1.1.2.3
|    |    |    |    |    |    节律
|    |    |    |    |    3.1.1.2.4
|    |    |    |    |    |    深度
|    |    3.2 心脏
|    4 背部（病人坐起）
|    5 腹部（病人躺下）
|    6 上肢
|    7 下肢
|    8 神经反射
|    9 步态与腰椎运动

可以看到，这种JSON对象极不规则，代码如何写得简洁在我脑中困难地凝练着。想起以前也有类似的痛苦经历，如何递归一层又一层的对象花费了我好几个小时。第二次接触这种项目当然也费了不少时间，好在最后理清了思路。嗯，这是目前看起来最优雅的代码了。

function exploit(JSONObject){
    var layer = 1;
    var layer_arr = new Array();
    var pad = "|    ";
    reveal(JSONObject);

    function reveal(JSONObject) {
        var key_count = 0;
    
        for ( key in JSONObject ) {
            key_count ++
            layer_arr.push(key_count);

            var serial = pad.repeat(layer) + layer_arr.join('.') + " ";
            if ( ! isNaN(parseInt(key)) ) {
                console.log( serial );
            } else {
                console.log( serial + key );
            }
            
            layer ++
    
            if ( typeof(JSONObject[key]) == 'object' & JSONObject[key] != {} ) {
                var previous_count = key_count;
                reveal(JSONObject[key]);
                key_count = previous_count;
            } else {
                console.log( pad.repeat( layer ) + JSONObject[key] );
            }

            layer --
            layer_arr.pop();
        }
    }
}

exploit(request['sheet']);


输出已经在上面的最终效果那里给出，就不赘述了。


总结一下这类问题的关键点：

1. 函数调用自身。如上面的reveal函数在合适的时候调用了自己，每次只剥开一层，但能递归地剥开下一层，因此能遍历整个JSON。

2. 灵活运用局部变量和全局变量。经过反复思考，我把key_count作为局部变量，在每次调用reveal函数，也就是进入下一层遍历的时候都能归零，也就是重新进行编号；在进入下一层之前，使用一个最局部的变量previous_count保存遍历的进度信息；layer和layer_arr是遍历过程中遍历深度的记录信息，放在函数外作为全局变量；pad是缩进所用的字符串，不需要随着函数的调用而变化，因此也作为全局变量。这些变量在代码中的位置稍有偏差就不能达到想要的效果，可谓是“失之毫厘，谬以千里”。


呼~终于能用更短的代码实现这一功能了。个人感觉这个函数的扩展性很大，在我搜索的文章中似乎还没有人实现过这样的功能（不然我为什么要忍痛自己写呢？），想跟大家分享一下。如果大家还有什么更好的办法，或者已经有函数实现了上述功能，欢迎在评论区留言！


最后，我给我的实现方法起了个名字——“剥空心菜”，是因为启示我这样做的是初中世界历史课上做题遇到的一句话：

他摆弄这个国家就像家庭主妇摆弄卷心菜一样 。 他以为只要把外面的烂叶子剥掉就会有里边的好芯子 。 他不停地剥下去 ， 一直到剥光为止 。
—— 某苏联杂志主编评价戈尔巴乔夫



Baytars
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
java遍历JSON树
03-21
自己总结的。java遍历JSON树
递归遍历json对象所有节点值
Suk__的博客
01-11 1167
思路就是获取对象所有的key然后判断值是否为object对象,如果是就递归查找,不是就存入哈希表。
js递归遍历json所有数据
stone10086的博客
07-09 1万+
//递归遍历json所有数据 function getAllJson(jsons, name, sign) { if(name == "" || name == undefined) { name = "json" } for(key in jsons) { var k = name + sign + key; if(!...
js递归遍历树形json数据，根据关键字查找节点
Curry的博客
06-12 2万+
var nodes = [{id:1,name:1,children:[{id:4,name:4}]}] 实现方式 //递归实现 //@leafId 查找的id， //@nodes 原始Json数据 //@path 供递归使用 function findPathByLeafId(leafId, nodes, path) { if(path === undefined) {...
遍历JSON所有节点（深度优先遍历）
xinbaiyu的博客
01-16 3737
var json = { a: { b: { c: 1 } }, d: [25, 26] } function dfs(root, path) { console.log(root, path); Object.keys(root).forEach(k => { dfs(root[k], path.concat(k)) }) } dfs(json, [])
C语言之二叉查找树
Jiangtagong的博客
08-27 993
对于树的基本认识，我们很容易通过我们平常所见到的树来理解：一棵树，有一个根，根往上又会分叉出大树枝，大树枝又会分叉出小树枝，以此往复，直到最后是叶子。而作为数据结构的树也是类似的，只不过我们通常将它倒着画。树的应用也相当广泛，例如在文件系统，数据库索引中的应用等。本文会对树的基本概念做介绍，但重点介绍二叉查找树。 软件是通过数据和算法实现对现实世界的抽象，具有层次关系的数据在现实世界中能找到很多实例，比如： 公司组织架构：董事长-CXO-总监-经理-主管-员工； 中国行政区域划分：中国-省-市（县）-.
树的遍历(总结自leetcode上2道easy和7道median)
贝壳er的博客
12-15 279
目录1.二叉树的遍历1.1 DFS（前序、中序、后序）--->LC144、LC94、LC1451.1.1 递归1.1.2 模拟栈1.1.3 Morris遍历1.2 BFS（层序） --->剑指32-I、LC102、LC1032.N叉树的遍历 --->LC589、LC590、LC429 1.二叉树的遍历 前序：根左右 中序：左根右 后序：左右根 层序：从上到下，每一层从左到右 结果： 前序：ABDFECGHI 中序：DBEFAGHCI 后序：DEFBHGICA 层序：ABCDFGIEH 1
js递归遍历树形json数据（找到children数据）
Ginger博客
09-30 3092
var returnedItem; //定义一个不不赋值的变量 var find = function(arr, id){ arr.forEach((item) => { //利用foreach循环遍历 if(item.id==id)//判断递归结束条件 { returnedItem = item; .
json树遍历（递归）
翻倍。的博客
07-11 6306
json树 ：有多个根节点和子节点        function readTree(node){ $.each(node,function(i,val){ //写运行代码 var children = val.children; if (children && children.length) { ...
遍历json显示树形菜单
10-18
遍历json显示树形菜单 遍历json显示树形菜单 遍历json显示树形菜单
在Java中遍历json树结构
LinDom
03-30 3763
public void listest(@RequestBody String strjson) { List<String> ds =new ArrayList<String>(); JSONObject json = JSONObject.parseObject(strjson); for (Map.Entry<String, Objec...
JS递归遍历树结构
热门推荐
S1ow
08-15 5万+
<script> var arrs = []; function haha(){ var data = [ { name: '中国, children: [ { name: '教',
Js 递归遍历Json所有的key 和 value
无需有太多~
06-30 1万+
Js 递归遍历Json所有的key 和 value 分析： 遍历json所有的key，如果当前层的某个key对应的值是object或者数组的话就继续递归，如果其他值就是具体的值了！ 实现代码： // 遍历解析Json function parseJson(jsonObj) { // 循环所有键 for(var key in jsonObj) { //如果...
遍历Json取节点
做你想做的人，没有时间的限制，只要愿意，什么时候都可以start。
06-29 2743
org.json.JSONObject这个类.JSONObject jsonObject = new JSONObject(jsonStr); JSONObject pathsJson = jsonObject.getJSONObject("paths"); Iterator&lt;String&gt; keys = pathsJson.keys(); Map&lt;String,St...
遍历 JSON 的所有节点值
CaseyWei
11-23 787
const json = { a: { b: { c: 1 } }, d: [1, 2] } const dfs = (n, path) => { console.log(n, path); Object.keys(n).forEach(k => { dfs(n[k], path.concat(k)); }) } dfs(json, []);
【074】Javascript多叉树的递归遍历和非递归遍历
zhangchao19890805的专栏
05-04 2万+
演示之前的准备工作演示项目的文件结构：index.html jsonData.js recurrenceTree.js noRecurrenceTree.js解释一下各个文件：index.html 是用来演示的 HTML 文件。 jsonData.js 里面存储着多叉树的JSON数据。 recurrenceTree.js 递归算法遍历树。 noRecurrenceTree.js 非递归算
js递归找json数据父节点下的所有子节点
08-27 3054
描述：寻找一个组织架构下的所有子组织架构，如果该子组织架构下还有组织，则一并找出。 一：json数据 let orginization = [{ "id": "0", "parentid": "null", "name": "深圳市****公司"}, { "id": "1", "parentid": "0", "name": "研发部"}, { "id": "2", "paren...
前端与树：遍历JSON的所有节点值（深度优先遍历）
zpfnext的博客
10-06 543
const json = { a: {b: {c: 1}}, d: [1,2] }; const dfs = (n,path) => { console.log(n,path) Object.keys(n).forEach(k => { dfs(n[k],path.concat(k)) }) } dfs(json,[])
遍历json文件所有节点的算法有哪些
最新发布
03-24
常见的遍历 JSON 文件的算法有递归算法和迭代...其中，递归算法可以通过递归函数对整个 JSON 树进行深度优先遍历，而迭代算法则可以借助栈或队列等数据结构，实现广度优先遍历。详情可以参考相关的 JSON 库的实现代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值