接口返回html转换josn 接口返回数据Json格式处理

有这样一个页面 ， 用来显示用户的账户记录数据，并且需要显示每个月的 收入 支出合计

，在分页的时候涉及到一些问题，需要对返回的Json格式做处理，处理起来比较麻烦，后端返回的Json数据格式形式如下：

{

"code": "0",

"result": {

"monthAmount": [

{

"date": "-09",

"income": 6000000,

"expend": 1233800

}

],

"billList": [

{

"id": ,

"amount": 1000000,

"balance": 4776200,

"type": "1",

"sourceId": "7",

"orderNumber": "0914100000294222",

"mchNumber": "v1500949333578",

"mchName": "大王杂货店",

"date": "-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集合，得到每条记录的月份日期-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

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

声明：原创文章，转载请注意出处！/p/e0ac1eb26ed2

标签：前端，js

在C&num;中通过使用Newtonsoft&period;Json库来解析百度地图地理编码(GeoCoder)服务接口返回的Json格式的数据

百度地图地理编码(GeoCoder)服务接口返回的Json格式的数据,如下所示: http://api./geocoding/v3/?address=**省**市**区**路 ...

&dollar;&period;ajax返回的JSON格式的数据后无法执行success的解决方法

近段时间做项目,在项目使用了ajax技术,遇到了一个奇怪的问题:"$.ajax返回的JSON格式的数据无法执行success",代码是这样写的: 1 $.ajax({ 2 .. 3 ...

javascript解析从服务器返回的json格式数据

在javascript中我们可以将服务器返回的json格式数据转换成json格式进行使用,如下: 1.服务器返回的json格式数据: 通过response.responseText获得: " ...

用javascript向一个网页连接接口发送请求，并接收该接口返回的json串

一般前端与后端的互交都是通过json字符串来互交的,我的理解就是与网页接口的来回数据传递采用的数据结构就是json.一般是这样. 比如后端的代码是这样的: @RequestMapping(value ...

关于http接口开发中json格式数据编码问题处理

关于http接口开发中json格式数据编码问题处理 在实际工作中,接口很多时候返回json格式,但有时返回的格式会有编码问题 假设如下接口:/interf ...

Ajax中返回数据的格式

Ajax中常见的返回数据的格式有三种:分别为文本,XML和JSON 返回的文本格式我们在上一堂课Ajax基础介绍中已经介绍过了 Ajax.php Form.html:通过Ajax对象的response ...

酷友观点&sol;经验：支付接口返回数据接收地址，session数据丢失(或者说失效)的问题浅析&lpar;原创文章&rpar;

酷友观点/经验:支付接口返回数据接收地址,session数据丢失(或者说失效)的问题浅析(原创文章) 最近手头在开发一个游戏官网,在支付模块采用神州付技术支持,神州付数据表单中要求提供服务器返回地 ...

python接口自动化26-参数关联和JSESSIONID&lpar;上个接口返回数据作为下个接口请求参数&rpar;

前言 参数关联是接口测试和性能测试最为重要的一个步骤,很多接口的请求参数是动态的,并且需要从上一个接口的返回值里面取出来,一般只能用一次就失效了. 最常见的案例就是网站的登录案例,很多网站的登录并不仅 ...

python3乱码问题：接口返回数据中文乱码问题解决

昨天测试接口出现有一个接口中文乱码问题,现象: 1浏览器请求返回显示正常 2用代码请求接口返回数据中文显示乱码 3使用的python3,python3默认unicode编码,中文都是可以正常显示 ...

随机推荐

向架构师进军---&gt&semi;系统架构设计基础知识

如果你对项目管理.系统架构有兴趣,请加微信订阅号"softjg",加入这个PM.架构师的大家庭 在讲解系统架构设计之前,有必要补充一下架构相关的概念,因此本博文主要讲述架构.架构师 ...

Robot Framework--04 工作区

转自:/tulituqi/article/details/7592711 一:Edit 接着前面的来,重新打开我们的RIDE,你会发现之前最后加的Resourc ...

QTP动态加载对象库

Public Function AddObjectRepository(path) On Error Resume Next Dim pos, repath If instr(path,". ...

hdu 1853 Cyclic Tour 最小费用最大流

题目链接:http://acm./showproblem.php?pid=1853 There are N cities in our country, and M one-way ...

UIWebView与JS的深度交互-b

要实现这样一个需求:按照本地的CSS文件展示一串网络获取的带HTML格式的只有body部分的文本,需要自己拼写完整的 HTML.除此之外,还需要禁用获取的HTML文本中自带的 < img &gt ...

BZOJ1646&colon; &lbrack;Usaco Open&rsqb;Catch That Cow 抓住那只牛

1646: [Usaco Open]Catch That Cow 抓住那只牛 Time Limit:5 SecMemory Limit:64 MBSubmit:634Solved ...

poj 2515 Birthday Cake

/** 大意 : 求1^m + 2^m + 3^m + 4^m +....+ n^m 解题步骤: 先构造从0到m的第1阶差分序列,然后以下所有2---->p阶的差分表. 令C[n+1][1]=n ...

咸鱼入门到放弃4——Http协议

一.什么是HTTP协议 HTTP是hypertext transfer protocol(超文本传输协议)的简写,它是TCP/IP协议的一个应用层协议,用于定义WEB浏览器与WEB服务器之间交换数据的 ...

oracle累积求和分析函数sum over的使用

oracle sum()over函数的使用 over不能单独使用,要和分析函数:rank(),dense_rank(),row_number()等一起使用. over函数的参数:over(partit ...

Stm32 资料

/i/UODMyMTgwNTY=?spm=a2hzp.8253869.0.0 /dpool/blog/s/blog_14f65 ...