首頁猿問賬單列表如何將年份月份一樣的排在一起

賬單列表如何將年份月份一樣的排在一起

JavaScript JQuery Vue.js

qq_淺倉小星_0 2019-06-06 00:54:19

array:[{? ? ? ? ? ? ? ? ? ? "amount":5000,? ? ? ? ? ? ? ? ? ? "goodsInfo":"翡翠城租金",? ? ? ? ? ? ? ? ? ? "tradeTime":"2019-04-20"? ? ? ? ? ? ? ? },? ? ? ? ? ? ? ? {? ? ? ? ? ? ? ? ? ? "amount":1200,? ? ? ? ? ? ? ? ? ? "goodsInfo":"五聯西苑租金",? ? ? ? ? ? ? ? ? ? "tradeTime":"2019-04-25"? ? ? ? ? ? ? ? },? ? ? ? ? ? ? ? {? ? ? ? ? ? ? ? ? ? "amount":200,? ? ? ? ? ? ? ? ? ? "goodsInfo":"愛與家賓館",? ? ? ? ? ? ? ? ? ? "tradeTime":"2019-04-30"? ? ? ? ? ? ? ? },? ? ? ? ? ? ? ? {? ? ? ? ? ? ? ? ? ? "amount":3800,? ? ? ? ? ? ? ? ? ? "goodsInfo":"丁香花園",? ? ? ? ? ? ? ? ? ? "tradeTime":"2019-05-20"? ? ? ? ? ? ? ? },? ? ? ? ? ? ? ? {? ? ? ? ? ? ? ? ? ? "amount":2500,? ? ? ? ? ? ? ? ? ? "goodsInfo":"濱興小區",? ? ? ? ? ? ? ? ? ? "tradeTime":"2019-05-28"? ? ? ? ? ? ? ? },? ? ? ? ? ? ? ? {? ? ? ? ? ? ? ? ? ? "amount":2800,? ? ? ? ? ? ? ? ? ? "goodsInfo":"濱苑小區",? ? ? ? ? ? ? ? ? ? "tradeTime":"2019-06-08"? ? ? ? ? ? ? ? }]我從后臺拿到一組數據是如果這樣的，我要怎么提取出年份月份一樣的，將其排在一起變成像下面那個數組，后面有效果圖newArray:[? ? ? ? ? ? ? ? ? ? {? ? ? ? ? ? ? ? ? ? ? ? "tradeTime":[? ? ? ? ? ? ? ? ? ? ? ? ? ? {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "amount":5000,? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "goodsInfo":"翡翠城租金",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "tradeTime":"2019-04-20"? ? ? ? ? ? ? ? ? ? ? ? ? ? },? ? ? ? ? ? ? ? ? ? ? ? ? ? {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "amount":1200,? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "goodsInfo":"五聯西苑租金",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "tradeTime":"2019-04-25"? ? ? ? ? ? ? ? ? ? ? ? ? ? },? ? ? ? ? ? ? ? ? ? ? ? ? ? {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "amount":200,? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "goodsInfo":"愛與家賓館",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "tradeTime":"2019-04-30"? ? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? ]? ? ? ? ? ? ? ? ? ? },? ? ? ? ? ? ? ? ? ? {? ? ? ? ? ? ? ? ? ? ? ? "tradeTime":[? ? ? ? ? ? ? ? ? ? ? ? ? ? {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "amount":3800,? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "goodsInfo":"丁香花園",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "tradeTime":"2019-05-20"? ? ? ? ? ? ? ? ? ? ? ? ? ? },? ? ? ? ? ? ? ? ? ? ? ? ? ? {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "amount":2500,? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "goodsInfo":"濱興小區",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "tradeTime":"2019-05-28"? ? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? ]? ? ? ? ? ? ? ? ? ? },? ? ? ? ? ? ? ? ? ? {? ? ? ? ? ? ? ? ? ? ? ? "tradeTime":[? ? ? ? ? ? ? ? ? ? ? ? ? ? {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "amount":2800,? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "goodsInfo":"濱苑小區",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "tradeTime":"2019-06-08"? ? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? ]? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ]

查看完整描述

3 回答

已采納

橋本奈奈未

TA貢獻436條經驗獲得超108個贊

<!DOCTYPE?html><html?lang="en"><head><meta?charset="UTF-8"><meta?name="viewport"?content="width=device-width,?initial-scale=1.0"><meta?http-equiv="X-UA-Compatible"?content="ie=edge"><title>Document</title><style>.record?{border:?1px?solid?#ccc;margin:?20px?0;}.record-header-time?{display:?block;line-height:?50px;background:?lightblue;}.record-item?{display:?flex;height:?100px;align-items:?center;border-bottom:?1px?solid?#ccc;}</style></head><body><div?id="app"></div><script>var?datas?=?[{"amount":?5000,"goodsInfo":?"翡翠城租金","tradeTime":?"2019-04-20"},{"amount":?100,"goodsInfo":?"萬象城租金","tradeTime":?"2019-04-20"},{"amount":?200,"goodsInfo":?"萬里長城租金","tradeTime":?"2019-04-20"},{"amount":?1200,"goodsInfo":?"五聯西苑租金","tradeTime":?"2019-04-25"},{"amount":?1100,"goodsInfo":?"新河苑租金","tradeTime":?"2019-04-25"},{"amount":?200,"goodsInfo":?"愛與家賓館","tradeTime":?"2019-04-30"},{"amount":?3800,"goodsInfo":?"丁香花園","tradeTime":?"2019-05-20"},{"amount":?2500,"goodsInfo":?"濱興小區","tradeTime":?"2019-05-28"},{"amount":?2800,"goodsInfo":?"濱苑小區","tradeTime":?"2019-06-08"}];function?appendItem(el,item){var?$item?=?document.createElement('div');var?$time?=?document.createElement('time');var?$info?=?document.createElement('span');var?$amount?=?document.createElement('span');$item.className?=?'record-item';$time.className?=?'record-item-time';$info.className?=?'record-item-goods';$amount.className?=?'record-item-amount';$time.textContent?=?item.tradeTime;$info.textContent?=?item.goodsInfo;$amount.textContent?=?item.amount;$item.appendChild($time);$item.appendChild($info);$item.appendChild($amount);el.appendChild($item);}function?appendHeaderTime(el,?time){var?$time?=?document.createElement('time');$time.className?=?'record-header-time';$time.textContent?=?time;el.appendChild($time);}var?frag?=?document.createDocumentFragment();for(var?i?=?0;i<datas.length;i++)?{var?$wrapper?=?document.createElement('div');var?v?=?datas[i];$wrapper.className?=?'record';appendHeaderTime($wrapper,?v.tradeTime);appendItem($wrapper,?v);for(var?j?=?i+1;j<datas.length;j++)?{var?o?=?datas[j];if(v.tradeTime?===?o.tradeTime)?{appendItem($wrapper,o);continue;}i?=?j-1;break;}frag.appendChild($wrapper);}document.getElementById('app').appendChild(frag);</script></body></html>

既然已經有人說了如何提取同時間數據，那我就不按題主要求來了，在不修改數據基礎上實現題主所要求的目的。一般來說后端提供的數據雖然沒有分時間給，但一般會按時間順序給。所以這里假設時間是有序的，那么就可以循環去比較時間然后去做對應的DOM渲染。

方法有很多，這里使用循環是一個比較容易理解和想到的方案。也可以采用遞歸去處理。

關于代碼沒有美化問題，因為復制到編輯器就這樣我就不換了，使用編輯器格式化一下即可。

反對回復 2019-06-07

qq_淺倉小星_0
新數組弄出來了我現在想把每個月的金額總和起來該怎么做

回復 2019-06-10
橋本奈奈未
使用數組的reduce方法

回復 2019-06-11

我乃張真人

TA貢獻5條經驗獲得超0個贊

格式改為這樣吧：

newArray:{

????"2014-04":[

?????????????????{

????????? ? ?? ? ? ? ? ?"amount":5000,

????????? ? ? ? ? ? ? ? ?"goodsInfo":"翡翠城租金",

????????? ? ? ? ? ? ? ? "tradeTime":"2019-04-20"

????????? ? ? ? ?},

? ? ? ? ? ? ? ? ?{

? ? ? ? ? ? ? ? ? ? ?"amount":1200,

? ? ? ? ? ? ? ? ? ? ? "goodsInfo":"五聯西苑租金",

? ? ? ? ? ? ? ? ? ? ? ? "tradeTime":"2019-04-25"

? ? ? ? ? ? ? ? ?},

? ? ? ? ? ? ? ? ?{

? ? ? ? ? ? ? ? ? ? ? ? "amount":200,

? ? ? ? ? ? ? ? ? ? ? ? ?"goodsInfo":"愛與家賓館",

? ? ? ? ? ? ? ? ? ? ? ? ? ?"tradeTime":"2019-04-30"

? ? ? ? ? ? ? ? ? ?}

????]

}

反對回復 2019-06-06

3 回答
0 關注
3163 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

賬單列表如何將年份月份一樣的排在一起

賬單列表如何將年份月份一樣的排在一起

3 回答

添加回答