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

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

今天我们写一个关于处理多层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>

鄙人能力有限,写的可能哪里是有问题的,但是写过的代码都是我测试的,目前没有发现什么问题,如果您有更好的处理办法或者有更好的写法,可以随时联系我,一起交流。

谢谢阅读

相关文章
|
10天前
|
存储 JSON JavaScript
「Python系列」Python JSON数据解析
在Python中解析JSON数据通常使用`json`模块。`json`模块提供了将JSON格式的数据转换为Python对象(如列表、字典等)以及将Python对象转换为JSON格式的数据的方法。
27 0
|
14天前
|
存储 JSON 数据挖掘
python逐行读取txt文本中的json数据,并进行处理
Python代码示例演示了如何读取txt文件中的JSON数据并处理。首先,逐行打开文件,然后使用`json.loads()`解析每一行。接着,处理JSON数据,如打印特定字段`name`。异常处理包括捕获`JSONDecodeError`和`KeyError`,确保数据有效性和字段完整性。将`data.txt`替换为实际文件路径运行示例。
11 2
|
28天前
|
JSON JavaScript 数据格式
【深入探究C++ JSON库】解析JSON元素的层级管理与遍历手段
【深入探究C++ JSON库】解析JSON元素的层级管理与遍历手段
82 2
|
1月前
|
JSON 数据格式
糊涂工具类(hutool)post请求设置body参数为json数据
糊涂工具类(hutool)post请求设置body参数为json数据
19 1
|
1月前
|
JSON 前端开发 数据格式
Ajax传递json数据
Ajax传递json数据
11 0
|
1月前
|
JSON 并行计算 API
使用CJSON/Nlohmann:快速简便地在C/C++中处理JSON数据
使用CJSON/Nlohmann:快速简便地在C/C++中处理JSON数据
96 0
|
1月前
|
存储 JSON Apache
揭秘 Variant 数据类型:灵活应对半结构化数据,JSON查询提速超 8 倍,存储空间节省 65%
在最新发布的阿里云数据库 SelectDB 的内核 Apache Doris 2.1 新版本中,我们引入了全新的数据类型 Variant,对半结构化数据分析能力进行了全面增强。无需提前在表结构中定义具体的列,彻底改变了 Doris 过去基于 String、JSONB 等行存类型的存储和查询方式。
揭秘 Variant 数据类型:灵活应对半结构化数据,JSON查询提速超 8 倍,存储空间节省 65%
|
1月前
|
JSON 数据格式 Python
Python生成JSON数据
Python生成JSON数据
23 0
|
1月前
|
JSON 数据可视化 Linux
数据可视化工具JSON Crack结合内网穿透实现公网访问
数据可视化工具JSON Crack结合内网穿透实现公网访问
数据可视化工具JSON Crack结合内网穿透实现公网访问
|
2月前
|
JSON fastjson Java
FastJSON操作各种格式的JSON数据
FastJSON处理各种格式的JSON数据