對後臺返回的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");

雖然過程麻煩了點,我也知道肯定有簡便點的方法,但是項目很急,本人又是小白一隻,只好這樣先實現,後期再去優化了。請大牛指點

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章