接口返回数据Json格式处理
2017-09-27 02:20
483 查看
有这样一个页面 , 用来显示用户的账户记录数据,并且需要显示每个月的 收入 支出合计
,在分页的时候涉及到一些问题,需要对返回的Json格式做处理,处理起来比较麻烦,后端返回的Json数据格式形式如下:
{ "code": "0", "result": { "monthAmount": [ { "date": "2017-09", "income": 6000000, "expend": 1233800 } ], "billList": [ { "id": 2004, "amount": 1000000, "balance": 4776200, "type": "1", "sourceId": "7", "orderNumber": "20170914100000294222", "mchNumber": "v1500949333578", "mchName": "大王杂货店", "date": "2017-09-14 16:58:52" } ] } }
分析以上Json数据格式,分为2个数组,一个是合计数组,一个是账户记录,我们需要将两个数组处理,将相同月份的数据展示在一起,组成新的我们需要的Json格式
"arr": [ { "date": "本月", "income": 6000000, "expend": 1233800, "items": [ { "week": "今天", "weekdate": "16:58", "amount": 1000000, "balance": 4776200, "statusText": "团体购卡", "type": "1", "logo": "1" } ] } ]
数据上拉加载的时候如果当前月份数据未加载完,需要在最后一条记录上面追加数据,要保证分页后数据正确显示,首先我们通过遍历billList集合,得到每条记录的月份日期2017-09,与设置的date标识判断是否相等
如果是同一月份,在最后一条记录追加该条数据
let data ={week:obj.week,weekdate:obj.weekdate,amount:obj.amount,balance:obj.balance,statusText:type[obj.sourceId],type:obj.type,logo:logo[obj.sourceId],status:obj.status}; _obj.arr[_obj.arr.length-1].items.push(data);
如果是其他月份,创建一个包括该月份统计数据的对象,并将该月份的收支合计显示出来
let data ={week:result.billList[i].week,weekdate:result.billList[i].weekdate,amount:result.billList[i].amount,balance:result.billList[i].balance,statusText:type[result.billList[i].sourceId],type:result.billList[i].type,logo:logo[result.billList[i].sourceId],status:result.billList[i].status}; let obj ={date:_date,income:result.monthAmount[j].income,expend:result.monthAmount[j].expend,items:[data]};
以下是nodejs部分代码
let parameter = ctx.request.body; console.log('/accountRecord : post :openid='+ctx.session.vpOpenId +' : 提交的参数:'+JSON.stringify(parameter)); let _obj = {count:0,arr:[]}; let date = ""; let count = 0; let result =await accountsBillData(ctx,parameter.num,10,ctx.session.indexTime); if(result != null && result.billList.length > 0 && !result.msg){ for(let i =0; i<result.billList.length;i++){ let type = {0:result.billList[i].mchName+' 奖金', 1:'发红包', 2:'红包退回', 3:'推荐码红包入账', 4:'充值', 5:'提现', 6:'提现失败', 7:result.billList[i].mchName+' 购买礼遇',8:result.billList[i].mchName+' 奖金',9:result.billList[i].mchName+' 礼遇退款',10:result.billList[i].mchName+' 礼遇退款',11:'手续费'}; let logo = {0:'4', 1:'1', 2:'1', 3:'1', 4:'6', 5:'2', 6:'1', 7:'3',8:'4',9:'5',10:'5',11:'7'}; let _date2 = result.billList[i].date.substr(0,7); if(date == _date2){ let obj = result.billList[i]; let weekarr = getPtWeek(obj.date).split("|"); obj.week = weekarr[0];//显示的星期 obj.weekdate = weekarr[1];//显示月份和日期 let data = {week:obj.week,weekdate:obj.weekdate,amount:obj.amount, balance:obj.balance,statusText:type[obj.sourceId],type:obj.type,logo:logo[obj.sourceId],status:obj.status}; _obj.arr[_obj.arr.length-1].items.push(data); count++; }else { date = _date2; for(let j =0; j< result.monthAmount.length;j++){ if(date == result.monthAmount[j].date){ let _date = new Date(result.monthAmount[j].date); let curMonth = new Date().getMonth(); if(curMonth == _date.getMonth()){ _date = "本月"; }else{ _date = _date.getMonth()+1+"月"; } let weekarr = getPtWeek(result.billList[i].date).split("|"); result.billList[i].week = weekarr[0];//显示的星期 result.billList[i].weekdate = weekarr[1];//显示月份和日期 let data = {week:result.billList[i].week,weekdate:result.billList[i].weekdate,amount:result.billList[i].amount, balance:result.billList[i].balance,statusText:type[result.billList[i].sourceId],type:result.billList[i].type,logo:logo[result.billList[i].sourceId],status:result.billList[i].status}; let obj ={date:_date,income:result.monthAmount[j].income,expend:result.monthAmount[j].expend,items:[data]}; _obj.arr.push(obj); count++; } } } } }else if(result.msg){ ctx.body = result.msg; } _obj.count = count; console.log('/accountRecord : post :openid='+ctx.session.vpOpenId +' : 回传数据:'+JSON.stringify(_obj)); ctx.body = _obj;
页面部分代码
if (!data.msg) {//请求成功 if(data.arr.length > 0){ for (var i in data.arr){ if(data.arr[i].date == vm.$data.date){ vm.$data.series[vm.$data.series.length-1].items = vm.$data.series[vm.$data.series.length-1].items.concat(data.arr[i].items); }else { vm.$data.date=data.arr[i].date; var arr2 ={date:data.arr[i].date,income:data.arr[i].income,expend:data.arr[i].expend,items:data.arr[i].items}; vm.$data.series.push(arr2); } } } if(data.count < 10){ // 锁定 me.lock('down'); // 无数据 me.noData(); setTimeout(function(){ $('.dropload-down').hide(); },1000); } vm.num ++; }
页面显示效果
作者:fozero 声明:原创文章,转载请注意出处!http://www.jianshu.com/p/e0ac1eb26ed2 标签:前端,js
相关文章推荐
- 接口规范,js处理json,php返回给ajax的数据格式
- JSON API免费接口 各种提供JSON格式数据返回服务网站的API接口
- aotocomplete.js 处理返回后台传回的json格式的数据
- HttpClient以json形式的参数调用http接口并对返回的json数据进行处理(可以带文件)
- 【js与jquery】jquery对返回json格式数据的处理和解析
- 用Jquery处理PHP返回的JSON格式数据的三种方法
- ajax处理请求,以JSON数据格式返回,(json时间日期返回时对象---》日期格式)
- vs2015开发webserver 返回json格式 实现图书编目数据接口
- json格式数据,将数据库中查询的结果转换为json, 然后调用接口的方式返回json(方式一)
- 解决处理后台返回json数据格式问题
- Android解析相同接口返回不同格式json数据的方法
- 快速解决处理后台返回json数据格式的问题
- JS 对java返回的json格式的数据处理
- HttpClient以json形式的参数调用http接口并对返回的json数据进行处理(可以带文件)
- Android客户端处理服务器端返回的Json格式数据
- Strust2 拦截器处理返回自定义json格式数据
- 快递单号跟踪借口 API免费接口 各种提供JSON格式数据返回服务网站的API接口
- .net http post接口返回json格式数据
- JS 对java返回的json格式的数据处理方法
- EasyNet.Solr系列:处理xml或者json格式返回数据