为了账号安全,请及时绑定邮箱和手机立即绑定

使用angular请求的数据需要根据时间分块渲染到页面的上,求思路?

使用angular请求的数据需要根据时间分块渲染到页面的上,求思路?

MM们 2018-11-21 17:13:44
$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 类别:人民币
查看完整描述

1 回答

?
慕桂英4014372

TA贡献1871条经验 获得超13个赞

最终把数据格式转换成:

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

]

}

  1. 然后遍历对象,转换成数组。

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


查看完整回答
反对 回复 2018-12-27
  • 1 回答
  • 0 关注
  • 378 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信