使用简单算法加jQuery接受json数据传入到Html树中

最新推荐文章于 2021-06-15 16:35:56 发布

liuyang1106

最新推荐文章于 2021-06-15 16:35:56 发布

阅读量526

点赞数 1

本文链接：https://blog.csdn.net/liuyang1106/article/details/79786003

版权

1.我们前端开发经常会得到后端人员的一个json数据，如果每次我们都去根据结构解析数据挺麻烦的，所以我写了一个简单的算法去解决这个问题，可以遍历大多数json数据

2.我们模拟从后台得到一个类似下面的数据，我们先传递一个简单一些的数据，json内部数据的数组部分

let obj2 = [
{name:'周星驰1' , key : '至尊宝1' ,child1 : [
{name:'周星驰child1' , key : '至尊宝child'},
{name:'周星驰child2' , key : '至尊宝'},
{name:'周星驰child3' , key : '至尊宝'},
{name:'周星驰child4' , key : '至尊宝'},
{name:'周星驰child5' , key : '至尊宝'},
],
child2 :[
{name:'周星驰child1' , key : '至尊宝child'},
{name:'周星驰child2' , key : '至尊宝'},
]
},
{name:'周润发' , key : '发哥1',child:[{name:'周润发child1' , key : '赌神child'},]},
{name:'周杰伦' , key : '周董1'},

]

我们来遍历这个对象，我们把对象obj当作一个树的根节点，他有3个子节点，每个子节点都是一个子树，每个子树可能有自己的叶子和child子树，child子树又可能有自己的叶子和child子树....以此类推形成一个庞大的大树。

分析这个树，其实你会发现十分容易但是有代表性，通过分析，我们发现在这个树的节点中，只有3中，1：叶子节点，也就是我们需要的数据，2：拥有叶子节点和子树节点的节点，3：在2的基础上拥有叶子节点和子树节点的节点，子树拥有多个子树节点，其实就是更复杂一些的2类型的数据。把这三种数据对应在js的对象，就几乎是等于js的object(代表2类型)，array（代表3类型，代表多个子树节点没有叶子节点的集合)，和string（对应1，就是我们需要的值节点）。现在问题就十分清楚了，我们只需要分这三种情况就可以遍历这颗树了。我们开始写代码

//遍历树
function readTree(obj){
if(obj instanceof Array ){//他是[]，里面放个很多个节点
let length = obj.length;
//先获取数据对象个数，也就是子树节点个数
for(let i = 0 ; i <= length ; i++ ){
let eachObj = obj[i];
//开始遍历数据每一项，也就是得到每一个子树节点
for(let key in eachObj){
if(typeof eachObj[key]==='object'){//遍历每一个子树节点
console.log(key+"开始")
//每一项的键值是对象也就是子树节点那就递归
readTree(eachObj[key]);
console.log(key+"结束")
}else{
//每一项是值也就是叶子节点就输出
console.log(key+":"+eachObj[key])
}
}
}
}else if(typeof obj === 'object'){
//传过来了一个对象
for(i in obj){
//先遍历这个对象,对象下的每一项是对象就递归，不用考虑Array，因为递归帮我们考虑了
let eachObj = obj[i];

if(obj[i] instanceof Array){

readTree(obj[i])//他是[]，里面放个很多个节点，递归
}
else if(typeof obj[i] === 'object'){
for(key in eachObj){//他是对象，我们就遍历他
//此时的key==0
if(typeof eachObj[key]==='object'){//如果对象的值不是叶子节点，就递归
readTree(eachObj[key]);
}else{
//直接输出这个节点，因为他是叶子节点，也就是值
console.log(key+":"+eachObj[key])
}
}
}else{
console.log(i+":"+eachObj)
}

}
}

};

我们调用这个方法，传入obj2得到，readTree(obj2),得到下面的结果（只有部分，挺多的数据）

那就OK了，

3.我们尝试一个更复杂的数据，模拟后台传出的结果

let obj = {
"core" : 0,
"data": [{
"name": "研发部",
"user": {
"userlist": [{
"name": "陈俊刚",
"userid": "113961640237625816"
},{
"name" : '周星驰',
"userid": ' 110'
}]
},
"child": [{
"name": "研发部门A",
"user": {
"userlist": [{
"name" : '至尊宝',
"userid" : '118'
}
]
},
"child": [{
"name": "研发部门A-1",
"user": {
"userlist": []
},
"child": [{
"name": "研发部门A-1-1",
"user": {
"userlist": []
},
"child": []
}]
}]
}, {
"name": "研发部门B",
"user": {
"userlist": []
},
"child": [{
"name": "研发部门B-1",
"user": {
"userlist": [{
"name": "王风",
"userid": "manager1597"
}]
},
"child": []
}]
}]
}, {
"name": "运营部",
"user": {
"userlist": [{
"name": "liuyang",
"userid": "1368150712183963993"
}]
},
"child": []
}, {
"name": "服务部",
"user": {
"userlist": []
},
"child": []
}]

};

遍历这个数据得到（只写出部分）：

很明显，我们也成功遍历了这个数据啦，很开心有没有，证明这个方法是可以通用的。

4.我们拿到了这个数据就可以将数据显示给dom了，我这里直接用html和jQuery显示了，使用React会很快！整个文件都在下面

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
let obj = {
"data": [{
"name": "研发部",
"user": {
"userlist": [{
"name": "陈俊刚",
"userid": "113961640237625816"
},{
"name" : '周星驰',
"userid": ' 110'
}]
},
"child": [{
"name": "研发部门A",
"user": {
"userlist": [{
"name" : '至尊宝',
"userid" : '118'
}
]
},
"child": [{
"name": "研发部门A-1",
"user": {
"userlist": []
},
"child": [{
"name": "研发部门A-1-1",
"user": {
"userlist": []
},
"child": []
}]
}]
}, {
"name": "研发部门B",
"user": {
"userlist": []
},
"child": [{
"name": "研发部门B-1",
"user": {
"userlist": [{
"name": "王风",
"userid": "manager1597"
}]
},
"child": []
}]
}]
}, {
"name": "运营部",
"user": {
"userlist": [{
"name": "liuyang",
"userid": "1368150712183963993"
}]
},
"child": []
}, {
"name": "服务部",
"user": {
"userlist": []
},
"child": []
}]
}
</script>
</head>
<body>
<div id="root">
</div>
</body>
</html>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//遍历树
function readTree(obj){
let $result = $('<ul></ul>');
if(obj instanceof Array ){
let length = obj.length;
//先获取数据对象个数
for(let i = 0 ; i <= length ; i++ ){
let eachObj = obj[i];
//开始遍历数据每一项
for(let key in eachObj){
if(typeof eachObj[key]==='object'){
console.log(key+"开始")
//每一项的键值是对象就递归
let $childRet = readTree(eachObj[key]);
$result.append($childRet)
console.log(key+"结束")
}else{
//每一项的键值可以输出
$result.append('<li>'+key+":"+eachObj[key]+'</li>')
console.log(key+":"+eachObj[key])
}
}
}
}else{
//传过来了一个对象
for(i in obj){
//先遍历这个对象,对象下的每一项是对象就递归，不用考虑Array，因为递归帮我们考虑了{
/*"userlist": [{
"name": "陈俊刚",
"userid": "113961640237625816"
}] i --->>userlist */
let eachObj = obj[i];
if(typeof obj[i] === 'object'){
for(key in eachObj){
//此时的key==0
if(typeof eachObj[key]==='object'){
let $childRet = readTree(eachObj[key]);
$result.append($childRet)
console.log(key+"结束")
}else{
//直接输出不是对象的值
console.log(key+":"+eachObj[key])
}
}
}else{
$result.append('<li>'+i+":"+eachObj+'</li>')
console.log(i+":"+eachObj)
}

}
}
return $result;
};
$('#root').append(readTree(obj.data));

</script>

我们的到的页面显示是如下：

Ok,大工告成！能遍历数据树的话，渲染到DOM树简直是轻而易举！

liuyang1106

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用简单算法加jQuery接受json数据传入到Html树中

1.我们前端开发经常会得到后端人员的一个json数据，如果每次我们都去根据结构解析数据挺麻烦的，所以我写了一个简单的算法去解决这个问题，可以遍历大多数json数据2.我们模拟从后台得到一个类似下面的数据，我们先传递一个简单一些的数据，json内部数据的数组部分 let obj2 = [ {name:'周星驰1' , key : '至尊宝1' ,child1 : [ {name:'周星驰c...
复制链接

扫一扫