对后台返回的json数据按月份分组并求和展示

[{"clickdate":"2017-10-24","value":"416"},{"clickdate":"2017-10-23","value":"473"},{"clickdate":"2017-10-22","value":"314"},
{"clickdate":"2017-10-21","value":"199"},{"clickdate":"2017-10-20","value":"310"},{"clickdate":"2017-10-19","value":"383"},
{"clickdate":"2017-10-18","value":"315"},{"clickdate":"2017-10-17","value":"281"},{"clickdate":"2017-10-16","value":"213"},
{"clickdate":"2017-10-15","value":"181"},{"clickdate":"2017-10-14","value":"152"},{"clickdate":"2017-10-13","value":"223"},
{"clickdate":"2017-10-12","value":"288"},{"clickdate":"2017-10-11","value":"305"},{"clickdate":"2017-10-10","value":"219"},
{"clickdate":"2017-10-09","value":"173"},{"clickdate":"2017-10-08","value":"91"},{"clickdate":"2017-10-07","value":"82"},
{"clickdate":"2017-10-06","value":"102"},{"clickdate":"2017-10-05","value":"138"},{"clickdate":"2017-10-04","value":"222"},
{"clickdate":"2017-10-03","value":"233"},{"clickdate":"2017-10-02","value":"162"},{"clickdate":"2017-10-01","value":"97"},
{"clickdate":"2017-09-30","value":"122"},{"clickdate":"2017-09-29","value":"157"},{"clickdate":"2017-09-28","value":"209"},
{"clickdate":"2017-09-27","value":"227"},{"clickdate":"2017-09-26","value":"260"},{"clickdate":"2017-09-25","value":"278"},
{"clickdate":"2017-09-24","value":"210"},{"clickdate":"2017-09-23","value":"143"},{"clickdate":"2017-09-22","value":"198"},
{"clickdate":"2017-09-21","value":"211"},{"clickdate":"2017-09-20","value":"242"},{"clickdate":"2017-09-19","value":"215"},
{"clickdate":"2017-09-18","value":"192"},{"clickdate":"2017-09-17","value":"126"},{"clickdate":"2017-09-16","value":"153"},
{"clickdate":"2017-09-15","value":"177"},{"clickdate":"2017-09-14","value":"286"},{"clickdate":"2017-09-13","value":"349"},
{"clickdate":"2017-09-12","value":"321"},{"clickdate":"2017-09-11","value":"316"},{"clickdate":"2017-09-10","value":"220"},
{"clickdate":"2017-09-09","value":"106"},{"clickdate":"2017-09-08","value":"105"},{"clickdate":"2017-09-07","value":"2"},
{"clickdate":"2017-09-06","value":"14"},{"clickdate":"2017-09-05","value":"6"},{"clickdate":"2017-09-04","value":"11"},
{"clickdate":"2017-09-03","value":"15"},{"clickdate":"2017-08-29","value":"1"},{"clickdate":"2017-08-28","value":"4"},
{"clickdate":"2017-08-27","value":"17"},{"clickdate":"2017-08-26","value":"15"},{"clickdate":"2017-08-25","value":"12"},
{"clickdate":"2017-08-24","value":"19"},{"clickdate":"2017-08-23","value":"10"},{"clickdate":"2017-08-20","value":"4"},
{"clickdate":"2017-08-19","value":"16"},{"clickdate":"2017-08-18","value":"17"},{"clickdate":"2017-08-17","value":"18"},
{"clickdate":"2017-08-16","value":"19"},{"clickdate":"2017-08-15","value":"18"},{"clickdate":"2017-08-14","value":"13"}}

今天遇到个问题,对后台请求到的json数据进行处理,后台传过来的数据为每天的数据量:

我需要按json数据中的月份来分组求每个月份的总值,展示到页面上:

本来如果可以写后台代码,用SQL语句再经过处理就可以得到想要的数据

但是由于后台不是我写的,所以只能从后台取到这些数据,想要正确展示出来就必须要处理一下,贴代码吧,有注释

					able_json = xmlhttp.responseText;
					var obj = JSON.parse(table_json);
					alert(table_json)
						//从json数据取出月份,不重复的月份,存入新的数组
					var mon = [];
					    for (var i = 1; i < obj.length; i++) {
					        var repeat = false;
					         for (var j = 0; j < mon.length; j++) {
					            if (mon[j] == obj[i].clickdate.substring(0,7)) {
					               repeat = true
					                break
					            }
					         }
					         if (!repeat) {
					            //不重复push 结果数组
					        	 mon.push(obj[i].clickdate.substring(0,7))
					         }
					     }
					    //对月份的数组进行遍历,从整个json数据中遍历每月份的值求和
					    var monvalue = [];
					    var one = 0;
					    for(var j = 0;j<mon.length;j++){
					    	var one = 0;
							for(var i=0;i<obj.length;i++){
						        if(obj[i].clickdate.substring(0,7) == mon[j]){
						            one += parseInt(obj[i].value);
						        }
						    }
							monvalue.push(one);
					    }

					    //把获取到的两个数组组合为一个数组,
					   var json_arr = [];
					    for (var i=0;i<mon.length;i++){
					    //		json_arr[mon[i]] = monvalue[i];
					    	json_arr.push([mon[i],monvalue[i]]);
					    }

					   //循环数组并打印信息
					var table1 = "<table id='table1' border='1'>"
						table1 +="<tr style='font-weight:bold; font-size:15px; background-color:#CCC;'><td>日期</td><td>上网人数</td></tr>"; 
						for(var i =0;i<json_arr.length;i++){
							var v = json_arr[i];
								table1 += "<tr><td>"+v[0]+"</td><td>"+v[1]+"</td></tr>"		
						}
						table1 +="</table>";
						$("#table_area").html(table1);	
						$("#table1 tr:odd").addClass("trlinebg");

虽然过程麻烦了点,我也知道肯定有简便点的方法,但是项目很急,本人又是小白一只,只好这样先实现,后期再去优化了。请大牛指点

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值