⼩程序开发笔记(⼋)—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)=>{
atetime==atetime){
index = j;
return true;
}
})
if(!isExists){
newArr.push({
atetime,
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":"wx.qlogo/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:
参考我之前的⼀个做法wwwblogs/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].at(newArr[i].subList);            }else{
this.list.push(newArr[i]);//数组追加
}
}
}
⽅式2:
参考使⽤后端mysql分组查询并按照分组条数来进⾏分页

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。