javascript - 使用angular請求的資料需要根據時間分塊渲染到頁面的上,求思路?
欧阳克
欧阳克 2017-06-28 09:27:04
0
2
829
$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)
習慣沉默

最後把資料格式轉換成:

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渲染。

至於思路的話:

  1. 先轉換成一個物件:

    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'},
    ]

    }

  2. 然後遍歷對象,轉換成數組。

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);
淡淡烟草味

雖然可以利用數組過濾匹配等對time進行拆分成你想要的格式,但是考慮到效率問題,我建議這些在服務端進行處理,返回你想要的數據格式,實在沒辦法的話再考慮數據分類處理

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板