javascript - 使用angular請求的資料需要根據時間分塊渲染到頁面的上，求思路？-PHP中文網路問答

文章專題學習下載問答程式設計字典遊戲最近更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

javascript - 使用angular請求的資料需要根據時間分塊渲染到頁面的上，求思路？

欧阳克 2017-06-28 09:27:04

713

$scope.data=[ {"time":"2017/06/23","money":"3000","type":"RMB"}, {"time":"2017/06/24","money":"4000","type":"RMB"}, {"time":"2017/07/23","money":"3000","type":"RMB"}, {"time":"2017/07/24","money":"4000","type":"RMB"}, {"time":"2017/07/25","money":"5000","type":"RMB"} ];

請求到的數據類似這樣，要根據time字段的時間，根據月份顯示數據，怎樣把六月和七月的數據過濾開
比如渲染到頁面要這樣顯示：
6月
23號金額：3000 類別：人民幣
24號金額：4000 類別：人民幣
7月
23號金額：3000 類別：人民幣
24號金額：4000 類別：人民幣
25號金額：5000 類別：人民幣

欧阳克

温故而知新，可以为师矣。博客：www.ouyangke.com

全部回覆 (2)

習慣沉默2017-06-28 09:29:04 2樓

最後把資料格式轉換成：

newData = [ { time: '2017/06', items: [ { time: '2017/06/23', money: '3000', type: 'RMB'}, { time: '2017/06/24', money: '4000', type: 'RMB'}, ] }, { time: '2017/07', items: [ { time: '2017/07/23', money: '3000', type: 'RMB'}, { time: '2017/07/24', money: '4000', type: 'RMB'}, ] }, ];

然後使用兩個ng-repeat渲染。

至於思路的話：

先轉換成一個物件：

obj = {

'2016/06': [ { time: '2017/06/23', money: '3000', type: 'RMB'}, { time: '2017/06/24', money: '4000', type: 'RMB'}, ], '2016/07': [ { time: '2017/07/23', money: '3000', type: 'RMB'}, { time: '2017/07/24', money: '4000', type: 'RMB'}, ]

}

然後遍歷對象，轉換成數組。

const data = [ { time: '2016/06/23', money: '1000', type: 'RMB' }, { time: '2016/06/24', money: '1200', type: 'RMB' }, { time: '2016/07/12', money: '1200', type: 'RMB' }, { time: '2016/07/15', money: '1200', type: 'RMB' }, ]; const obj = _.groupBy(data, item => item.time.substr(0, 7)); // 我这里使用了lodash，自行遍历数组也是一样的 const newData = Object.keys(obj).map(time => ({ time, items: obj[time] })); console.log(newData, 2);