首页 >社区问答列表 >javascript - 使用angular请求的数据需要根据时间分块渲染到页面的上，求思路？

javascript - 使用angular请求的数据需要根据时间分块渲染到页面的上，求思路？

欧阳克2017-06-28 09:27:04
[JavaScript讨论组]举报回复话题 ↕

$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 类别：人民币

全部回复（2）
我来回答

習慣沉默 2017-06-28 09:29:042楼

最终把数据格式转换成：

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

赞 +0 添加回复

淡淡烟草味 2017-06-28 09:29:041楼
虽然可以利用数组过滤匹配等对time进行拆分成你想要的格式，但是考虑到效率问题，我建议这些在服务端进行处理，返回你想要的数据格式，实在没办法的话再考虑数据分类处理
赞 +0 添加回复

进入小组列表 +发布话题

热门话题

javascript - 使用angular请求的数据需要根据时间分块渲染到页面的上，求思路？

javascript - 使用angular请求的数据需要根据时间分块渲染到页面的上，求思路？