首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >怎么处理多层Json数据循环遍历的问题?看这里

怎么处理多层Json数据循环遍历的问题?看这里

作者头像
何处锦绣不灰堆
发布2020-05-29 14:33:26
1.7K0
发布2020-05-29 14:33:26
举报
文章被收录于专栏:农历七月廿一农历七月廿一

今天我们写一个关于处理多层for循环的问题,其实这个严格来说不是多层循环的问题,他的本质其实是对Json数据格式的处理,很多时候啊我们的数据格式是这样的

数据格式:

var timeLineList=[{
    id: 0,
    title: '品质保证 ',
    iconName: '',
    messageList: [{
        mid: 0,
        mTxt: '平安保险承保',
        mStatus: '已确认'
    }, {
        mid: 1,
        mTxt: '官方授权',
        mStatus: '已确认'
    }, {
        mid: 2,
        mTxt: '正品保证',
        mStatus: '已确认'
    }, {
        mid: 3,
        mTxt: '3C认证',
        mStatus: '已确认'
    }]
},{
    id: 1,
    title: '售後服務 ',
    iconName: '',
    messageList: [{
        mid: 0,
        mTxt: '平安保险承保1',
        mStatus: '已确认'
    }, {
        mid: 1,
        mTxt: '官方授权1',
        mStatus: '已确认'
    }, {
        mid: 2,
        mTxt: '正品保证1',
        mStatus: '已确认'
    }, {
        mid: 3,
        mTxt: '3C认证1',
        mStatus: '已确认'
    }]
},{
    id: 2,
    title: '品质检测 ',
    iconName: '',
    messageList: [{
        mid: 0,
        mTxt: '平安保险承保2',
        mStatus: '已确认'
    }, {
        mid: 1,
        mTxt: '官方授权2',
        mStatus: '已确认'
    }, {
        mid: 2,
        mTxt: '正品保证2',
        mStatus: '已确认'
    }, {
        mid: 3,
        mTxt: '3C认证2',
        mStatus: '已确认'
    }]
},{
    id: 3,
    title: '售后电话 ',
    iconName: '',
    messageList: [{
        mid: 0,
        mTxt: '平安保险承保3',
        mStatus: '已确认'
    }, {
        mid: 1,
        mTxt: '官方授权3',
        mStatus: '已确认'
    }, {
        mid: 2,
        mTxt: '正品保证3',
        mStatus: '已确认'
    }, {
        mid: 3,
        mTxt: '3C认证3',
        mStatus: '已确认'
    }]
},{
    id: 4,
    title: '和我联系 ',
    iconName: '',
    messageList: [{
        mid: 0,
        mTxt: '平安保险承保4',
        mStatus: '已确认'
    }, {
        mid: 1,
        mTxt: '官方授权4',
        mStatus: '已确认'
    }, {
        mid: 2,
        mTxt: '正品保证4',
        mStatus: '已确认'
    }, {
        mid: 3,
        mTxt: '3C认证4',
        mStatus: '已确认'
    }]
}]

是吧,其实这样的数据是一个两层的数据,我在之前的博客里面写过,我说这种格式的数据其实是很常见的,但是今天为什么名字是处理多层for循环的问题呢?因为一般情况下这样的数据我们只要最内层的数据,也就是说后端将数据给我们,我们其实需要的只是最内层的那些数据,那么这样的话我们其实只需要将数据直接遍历就行了,不涉及多层循环取数据,但是我这里写的是要将数据展示成这样的形式:

如果你们仔细看数据的时候会发现这个数据是怎么展示的,他是将每一层的title作为一个遍历的对象,然后里面的每一层的里面的数据又是一次遍历,这样的数据怎么处理呢?今天我们写五种办法处理:

分析一波

没写之前我们首先分析一下这样的数据我们拿到以后应该以一种什么样的思路来处理。首先我们拿到数据第一步是看数据的特点,其实不管什么数据,只要是数据库创建的,他的数据都是有一定规律的,因为不可能说数据全是随机数生成的吧,那么数据库的数据怎么维护呢?是不是,特别是json格式的数据,既然是处理遍历,我们首先要知道数组的长度,那么他是两层的数据,我们拿那一层的长度呢?记住一个准则,分析问题的时候,由外往内分析,意思是先看最外层的长度,这人力说一下原因,因为其实循环的原理我们都知道,他是将满足条件的第一层全部走完,才会走第二层,举个最简单的例子:9*9乘法表,我们下面写一下:

for( var i=1;i<=9;i++){
		for(var j=1;j<=i;j++){
			document.write(j+"*"+i+"="+i*j+"&nbsp");
				}
			document.write("<br/>")
		}

我们可以看到,他是走完i=1的循环才会接着走i=2的情况,可能有人说这不是废话吗?是的,但是很多人理解这句话,就是不会用他的原理处理多层数据的问题,到这里其实我们就明白了,数据出来以后他是先走完最外层的第一个满足条件的数据,下面我画一个:

哈哈,画的太差,只是为了让你们可以看的明白,这里说一下,第一个条件不执行结束,循环是不会执行条件2的,那么这样的话,我们内层循环的时候可以直接写循环,不会影响外层的条件2,所以说json多层数据获取的问题就知道怎么处理,下面写代码。

for循环最常规的写法是下面是这样的:

$(document).ready(function(){
				console.log(timeLineList.length)
				for(let i = 0;i<timeLineList.length;i++){
					let outer = '<div class = "outer">'+timeLineList[i].title+'</div>';
					$("#mainbody").append(outer);
					let code = timeLineList[i].messageList;
					console.log(code.length);
					for(let j = 0;j<code.length;j++){
						let core = '<div>'+code[j].mTxt+'</div>'
						$("#mainbody").append(core);
					}
				}
			}); 

还有很多人喜欢这样写:

$(document).ready(function(){
				for(let i in timeLineList){
					let outer = '<div class = "outer">'+timeLineList[i].title+'</div>';
					$("#mainbody").append(outer);
					let code = timeLineList[i].messageList;
					for(let j in code){
						let core = '<div>'+code[j].mTxt+'</div>'
						$("#mainbody").append(core);
					}
				}
			})

用forEach循环也是一样可以实现的:

 $(document).ready(function(){
				 timeLineList.forEach(i=>{
					let outer = '<div class = "outer">'+i.title+'</div>';
					$("#mainbody").append(outer);
					let code = i.messageList;
					code.forEach(j=>{
						let core = '<div>'+j.mTxt+'</div>'
						$("#mainbody").append(core);
					})
				}) 
			})

还有一种不是很常规的写法:

$(document).ready(function(){
				timeLineList.map(i=>{
					let outer = '<div class = "outer">'+i.title+'</div>';
					$("#mainbody").append(outer);
					let code = i.messageList;
					code.map(j=>{
						let core = '<div>'+j.mTxt+'</div>'
						$("#mainbody").append(core);
					})
				})
			}) 

那么其实ES6还有一种新的写法:

 $(document).ready(function(){
			 	for(let i of timeLineList){
					let outer = '<div class = "outer">'+i.title+'</div>';
					$("#mainbody").append(outer);
					let code = i.messageList;
					for(let j of code){
						let core = '<div>'+j.mTxt+'</div>'
						$("#mainbody").append(core);
					}
				}
			 }) 

ok,到这里怎么处理这种情况的数据相信你们应该是可以有点思路了,下面我说一下用Jquery+Ajax将后端的这些json拿到:

$.ajax({
			         type: "post",
			         url: "接口名字",
			         async: false,
			         success: function (data) {
			         if (data.code == 200) {
			         for (let i in timeLineList) {
								let outer = '<div class = "outer">'+timeLineList[i].title+'</div>';
								$("#mainbody").append(outer);
								let code = timeLineList[i].messageList;
								console.log(code.length);
						for(let j = 0;j<code.length;j++){
								let core = '<div>'+code[j].mTxt+'</div>'
								$("#mainbody").append(core);
														}
												 }
											}
												},
					error : function(data){
						alert(data.message);
						}
			       });

其实我在之前是写过关于ajax处理数据的博文的,感兴趣的可以翻一下!

下面是全部源码:

<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="js/code.js"></script>
    <style type="text/css">
        .code-examples-content {
            border-radius: 0 0 2px 0;
            padding: 0 18px 15px;
            padding-top: 1rem;
        }
        .mu-timeline-item {
            position: relative;
            height: 40px;
            margin-left: 45px;
        }
        .mu-timeline-item-line {
            position: absolute;
            height: 100%;
            top:6px;
            border:1px solid rgba(172, 172, 172, 0.37);
            left: 2px;
        }
        .mu-timeline-item-icon {
            position: absolute;
            box-sizing: border-box;
            background-color: #fff;
            top:6px;
        }
        .mu-timeline-item-content {
            position: relative;
            padding-bottom: 20px;
        }
        .solidStyle{
            border-radius: 50%; border: 1px solid #ACACAC; width: 3px; height: 3px;
        }
        .timeline-left-style{
            width: 50%;float: left;font-size: 1.2rem;
        }
        .timeline-right-style{
            color: #E31436;
            width: 50%;
            text-align: right;
            float: right;
            position: absolute;
            right: 5%;
            font-size: 1.3rem;
        }
        .font-light-style{
            color: #ACACAC;
            font-size: 0.8rem;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            timeLineStyle();
            function timeLineStyle() {
                if(timeLineList && timeLineList.length>0){
                    timeLineList.map((ret,index)=>{
                        if(ret.id==index){
                            let title_div='<div class="code-examples-content">' +
                                '<div style="float:left; margin-right:7px;">' +
                                /*'<ion-icon  name='+ret.title+' class="iconfont serIconStyle"></ion-icon>' +*/
                                '<img style="width:1.8rem;"  src="">' +
                                '</div>' +
                                '<div style="color:#151515;font-size:1rem;font-weight: bold;" class=""> '+ret.title+'</div>' +
                                '</div>';
                            $("#zId").append(title_div);
                            let msgList = ret.messageList;
                            if(msgList && msgList.length>0){
                                msgList.map((val,i)=>{
                                    let m_div ='<div class="mu-timeline-item" id="lineVal">' +
                                        '<!--线-->' +
                                        '<div  id="line_'+i+'_'+index+'" class="mu-timeline-item-line"></div >' +
                                        '<!--圆圈-->' +
                                        '<div class="mu-timeline-item-icon">' +
                                        '<div class="solidStyle"></div>' +
                                        '</div>' +
                                        '<div class="mu-timeline-item-content"' +
                                        'style="left:15px;">' +
                                        '<div class="mu-timeline-item-time">' +
                                        '<div class="timeline-left-style font-light-style">'+val.mTxt+'</div>' +
                                        '<div class="timeline-right-style">' +
                                        '<div style="font-size:0.9rem;float: right;line-height:19px;" class="fontThreeSize">'+val.mStatus+'</div>' +
                                        '<!--<div style="float: left;width: 50%;text-align: right">' +
                                        '<ion-icon name="check" class="iconfont checkStyle"></ion-icon>' +
                                        '</div>' +
                                        '<div style="float: right;width: 50%;text-align: right"> {{i.mStatus}}</div>-->' +
                                        '</div>' +
                                        '</div>' +
                                        '<!--<div  class="mu-timeline-item-des">\n' +
                                        '<span >发起第一个pr</span>\n' +
                                        '</div>-->' +
                                        '</div>' +
                                        '</div>';
                                    $("#zId").append(m_div);
                                    if(i==msgList.length-1){
                                        let styleVal = document.getElementById('line_'+i+'_'+index);
                                        if(styleVal){
                                            styleVal.style.display='none'
                                        }
                                    }
                                })
                            }
                        }
                    })
                }
            }
        }

    </script>
</head>
<body>
<div  id="zId" class="bgColor-white" style="height: 100%">

</div>
</body>
</html>

鄙人能力有限,写的可能哪里是有问题的,但是写过的代码都是我测试的,目前没有发现什么问题.

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-09-03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
数据库
云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建,轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量,更专注于业务发展,让企业一站式享受数据上云及分布式架构的技术红利!
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档