将数组数据按年月份进行分类处理

实现结果效果图：

 

一般情况下，后台添加的数据是一个一个叠加，即最新添加的一组数据在整个数组中的最后一项（模拟数据以此排列），将数据按照年月份分类，最新的年月份显示在最前面，每个月份中的日期也是按照倒序展示。

 

小程序page页面data中模拟数组数据：

dataArr:[
      {
        "totalAmount":"5.00",
        "payedMoney":"5.00",
        "payNo": "OT202007071608359498859",
        "carNo": "粤A11111",
        "openid": "olh665V2tnVo4wfdaR2Ela0k9cNna3w",
        "id": "4028808573281b3d01732851cc310000",
        "duration":"1小时10分30秒",
        "payedTime":"2020-05-25 11:18:26"
      },
      {
        "totalAmount":"6.00",
        "payedMoney":"6.00",
        "payNo": "OT202007071608359498859",
        "carNo": "粤A11111",
        "openid": "olh665V2tnVo4wfdaR2Ela0k9cNna3w",
        "id": "4028808573281b3d01732851cc310000",
        "duration":"1小时10分30秒",
        "payedTime":"2020-06-23 11:18:26"
      },
      {
        "totalAmount":"7.50",
        "payedMoney":"7.50",
        "payNo": "OT202007071608359498859",
        "carNo": "粤A11111",
        "openid": "olh665V2tnVo4wfdaR2Ela0k9cNna3w",
        "id": "4028808573281b3d01732851cc310000",
        "duration":"1小时30分30秒",
        "payedTime":"2020-07-05 11:18:26"
      },
      {
        "totalAmount":"70.00",
        "payedMoney":"70.00",
        "payNo": "OT202007071608359498859",
        "carNo": "粤A11111",
        "openid": "olh665V2tnVo4wfdaR2Ela0k9cNna3w",
        "id": "4028808573281b3d01732851cc310000",
        "duration":"1小时30分30秒",
        "payedTime":"2020-07-10 14:18:26"
      }
    ]

希望得到的数据结果：

[
    {
       yearMonths:"2020-07-01",
       arr:[
               {
                    "totalAmount":"5.00",
                    "payedMoney":"5.00",
                    "payNo": "OT202007071608359498859",
                    "carNo": "粤A11111",
                    "openid": "olh665V2tnVo4wR2Ela0k9cNna3w",
                    "id": "4028808573281b3d01732851cc310000",
                    "duration":"1小时10分30秒",
                    "payedTime":"22020-07-01 11:18:26",
                    "days":"01日11:18:26"
                }
        ]
    },
    {
         yearMonths:"2020-06-25",
         arr:[
                  {
                      "totalAmount":"5.00",
                      "payedMoney":"5.00",
                      "payNo": "OT202007071608359498859",
                      "carNo": "粤A11111",
                      "openid": "olh665V2tnVo4wR2Ela0k9cNna3w",
                      "id": "4028808573281b3d01732851cc310000",
                      "duration":"1小时10分30秒",
                      "payedTime":"2019-12-15 11:18:26",
                      "days":"25日11:18:26"
                }    
        ]
    }
] 

对上面的数据进行处理：

dataHandle(data){//data参数为传入的数组数据
    //定义一个新的空数组
    let newArr = []
    //定义n为0，表示对数组中的第一个json对象进行处理
    let n = 0
    //用于存放年月
    let yearMonths = ''
    //对第一个数据中的payedTime时间进行处理，将其通过“-”进行分割为数组。如："2020-07-10 14:18:26"==>["2020","07","10 14:18:26]
    let timeHandle = data[0].payedTime.split('-')
    //再给timeHandle数组的第一、第二项拼接上年和月
    yearMonths =  timeHandle[0]+'年' + timeHandle[1] + '月'
    //将timeHandle第三项中日期后的空格替换为日
    let days = timeHandle[2].replace(" ","日")
    //给data数组中的第一项添加日期键值对
    data[0].days = days
    //将newArr数组添加第一个json对象 yearMonths为年月，arr为月份中的数据，这里添加的是第一个处理好的数据
    newArr.push({
      yearMonths:yearMonths,
      arr:[data[0]]
    })

    //然后循环剩下的数据，从1开始（即第二个数据开始，第一个数据已经处理过），
    for(let i=1;i<data.length;i++){
      //处理当前的数据
      let current = data[i].payedTime.split('-')
      //处理当前项的前一项数据
      let before = data[i-1].payedTime.split('-')
      //当前项的年月
      yearMonths =  current[0]+'年' + current[1] + '月'
      //当前项的日
      days = current[2].replace(" ","日")
      //给当前项添加days数据
      data[i].days = days
      //当前项中的年月与前一项的年月进行比较
      if(current[0]=== before[0] && current[1]=== before[1]){
        //都相等则表示该数据为同一年同一月份，然后将当前项处理好的数据添加的newArr中n项中arr月份数据中
        newArr[n].arr.push(data[i])　　
      }else{
        //不相等，n则加1，
        n++
        //newArr添加新的一项json数据
        newArr.push({
          yearMonths:yearMonths,
          arr:[data[i]]
        })
      }
    }
    //将newArr赋值给dataArr，页面中则对dataArr数据进行渲染
    this.setData({
      dataArr:newArr
    })
  },        

 

执行函数：

注意：将数组翻转是因为模拟的数据中最新的在最后一项，我们需要先对时间上最新的一项数据进行优先处理，如果后台返回的数据中第一项就是时间上最新的数据则不需要进行翻转了。

onLoad: function (options) {
    //将数组进行翻转，第一个处理的数据为最新的数据
    this.dataHandle(this.data.dataArr.reverse())
},

处理好的dataArr数据如图：

 

 最后就是页面渲染的部分了，这个代码我就不贴出来了，不懂可以问我。

后面才发现插入的图片有时候不能显示，多刷新几次试试吧...