今天我们写一个关于处理多层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+" "); } 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>
鄙人能力有限，写的可能哪里是有问题的，但是写过的代码都是我测试的，目前没有发现什么问题，如果您有更好的处理办法或者有更好的写法，可以随时联系我，一起交流。
谢谢阅读
