JQuery递归解析无限层级JSON对象的所有key和value

最新推荐文章于 2024-07-15 07:30:00 发布

Super .Wein（星痕）

最新推荐文章于 2024-07-15 07:30:00 发布

阅读量9.3k

点赞数 2

分类专栏： Web前端文章标签： jquery json 递归

本文链接：https://blog.csdn.net/a525390802/article/details/76293325

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前一段时间做了一个小项目，要加一个json数据自动绑定前台表单的功能，类似于jquery-easyui里面的数据绑定（给它一个json对象，就能自动解析里面有的数据。json数据的key对于表单的name属性，也可以是id或自己定义的标签属性，把key对应的值赋给对应名称的表单）。百度了许多JSON解析，都是前提知道json结构的情况下的解析，毛线的一点用都没有，最后看了一篇博客，明白了解析key和值的原理，自己写了一个简单的coding（里面的json数据从网上copy过来的，哈哈），废话不多说，上代码：

<!DOCTYPE html>
    <head>
    	    <title>递归解析无限层级JSON的所有key和value</title>
		<script src="jquery-2.0.3.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div>
			<ul id="menu"></ul>
		</div>
		<script>
		    var menulist = [{
	            "menulist": [
	                { "MID": "M001", "MName": "首页", "Url": "#", "menulist": "" },
	                { "MID": "M002", "MName": "车辆买卖", "Url": "#", "menulist":
	                    [
	                         { "MID": "M003", "MName": "新车", "Url": "#", "menulist":
	                            [
	                                { "MID": "M006", "MName": "奥迪", "Url": "#", "menulist": "" },
	                                { "MID": "M007", "MName": "别克", "Url": "#", "menulist": "" }
	                            ]
	                         },
	                         { "MID": "M004", "MName": "二手车", "Url": "#", "menulist": "" },
	                         { "MID": "M005", "MName": "改装车", "Url": "#", "menulist": "" }
	                    ]
	                },
	                { "MID": "M006", "MName": "宠物", "Url": "#", "menulist": "" }
	          ]
	        }];
	        
			$(function() {
				parseJson(menulist);
			});
			
			function parseJson(jsonObj) {
				if( typeof(jsonObj) == "undefined" ){
			        alert('JSON对象不能为空！');
			    }
				//遍历第一层数据
				for (var topKey in jsonObj) {
					//如果对象类型为object类型且数组长度大于0，递归继续解析
	                if (jsonObj[topKey].length > 0 && typeof(jsonObj[topKey]) == "object") {
	                    parseJson(jsonObj[topKey]);
	                } else {
	                	    //如果对象类型为object类型，依次循环取出所有元素
	                	    if (typeof(jsonObj[topKey]) == "object") {
		                	    for(var childKey in jsonObj[topKey]) {
		                	      	//如果对象类型为object类型，递归继续解析
			                	   	if (typeof(jsonObj[topKey][childKey]) == "object") {
				                    parseJson(jsonObj[topKey][childKey]);
				                } else {
				                	    //如果对象类型为object类型，直接取元素名称和值
				                	    $("#menu").append("<li>" + childKey + ":" + jsonObj[topKey][childKey] + "</li>");
				                }
		                	    }
	                	    } else{
	                	    	    //如果对象类型为object类型，直接取元素名称和值
	                	    	    $("#menu").append("<li>" + childKey + ":" + jsonObj[topKey][childKey] + "</li>");
	                	    }
	                }
               }
			}
		</script>
	</body>
</html>

代码很简单，只用了for循环、递归以及一些json的知识点，jquery用的熟练的很容易就能看懂（不明白的可以参考这篇博客，地址），有什么需要改进的或有什么考虑不全的欢迎指出。

在这里插入图片描述

Super .Wein（星痕）

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JQuery递归解析无限层级JSON对象的所有key和value

前一段时间做了一个小项目，要加一个json数据自动绑定前台表单的功能，类似于jquery-easyui里面的数据绑定（给它一个json对象，就能自动解析里面所有的数据。json数据的key对于表单的name属性，也可以是id或自己定义的标签属性，把key对应的值赋给对应名称的表单）。百度了许多JSON解析，都是前提知道json结构的情况下的解析，毛线的一点用都没有，最后看了一篇博客，明白了解析key
复制链接

扫一扫

专栏目录