小程序开发笔记（八）—Js数组按日期分组显示数据

数据分组展示有两种方式，一种是后端直接传入分组格式的Json数据，另一种是我们在前端自己转换格式，这里我们在前端处理转换按日期分组的数据格式

1、例如后端返回数据格式为：

[{createtime:'2019-07-29',content:'哈哈哈'},{createtime:'2019-07-29',content:'哈哈哈'}]

2、页面展示需要的格式为：

[{createtime:'2019-07-29',list:[{createtime:'2019-07-29',content:'哈哈哈'},{createtime:'2019-07-29',content:'哈哈哈'}]}]

3、下面我们使用Js处理成按日期分组归类的数据，代码如下：

let newArr = [];
        _list.forEach((item,i)=>{
          let index = -1;
          let isExists = newArr.some((newItem,j)=>{
            if(item.createtime==newItem.createtime){
              index = j;
              return true;
            }
          })
          if(!isExists){
            newArr.push({
              createtime:item.createtime,
              timeDay:item.timeDay,
              timeMonth:item.timeMonth,
              subList:[item]
            })
          }else{
            newArr[index].subList.push(item);
          }
    })

4、处理后的结果：

[
    {
        "createtime":"2019-07-27",
        "timeDay":27,
        "timeMonth":7,
        "subList":[
            {
                "group_post_id":128,
                "group_id":0,
                "group_topic_id":"",
                "uid":73,
                "nickname":"阿健w ",
                "avatar_url":"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKicUgL8bc6EDmPcST3ozT00OZTpmJSrpcFaB3Fjfp5b4PWNxEraKu1wviaIicxVcRzxOE7FfLRYFOTg/132",
                "content":"哈哈哈",
                "longitude":116.340988,
                "latitude":40.006805,
                "province":"",
                "city":"",
                "location":"",
                "address":"",
                "like_count":0,
                "comment_count":0,
                "status":"0",
                "createtime":"2019-07-27",
                "pics":[

                ],
                "timeDay":27,
                "timeMonth":7
            }
        ]
    }]

问题：

以上这种方式处理在正常情况下是没有问题的，但通常我们在分组显示的时候会存在分页的问题，可以看到下图出现了两个相同的日期，是因为同一天的分组数据不能一页展示完，可能会在第二页或者第三页出现的情况

解决：

方式1：

参考我之前的一个做法https://www.cnblogs.com/fozero/p/7599785.html

if(pageNum==1){
          this.list = newArr;
        }else{
          // 解决分组分页问题
          // 遍历newArr  与上页最后一条记录日期比较，相同日期则直接追加
          for(let i in newArr){
            if(newArr[i].createtime==this.list[this.list.length-1].createtime){
              this.list[this.list.length-1].subList = this.list[this.list.length-1].subList.concat(newArr[i].subList);
            }else{
              this.list.push(newArr[i]);//数组追加
            }
          }
        }

方式2：

参考使用后端mysql分组查询并按照分组条数来进行分页

https://www.cnblogs.com/jackyfee/archive/2011/05/07/GroupPage.html

https://blog.csdn.net/zhang197093/article/details/49425261