搜尋

首頁  >  問答  >  主體

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

$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 類別:人民幣

欧阳克欧阳克2704 天前808

全部回覆(2)我來回復

  • 習慣沉默

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

    最後把資料格式轉換成:

    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);

    回覆
    0
  • 淡淡烟草味

    淡淡烟草味2017-06-28 09:29:04

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

    回覆
    0
  • 取消回覆