search

Home  >  Q&A  >  body text

javascript - The data requested using angular needs to be rendered to the page in chunks based on time. Any ideas?

$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"}
    ];

The requested data is similar to this. The data needs to be displayed based on the time field and the month. How to filter the data in June and July?
For example, when rendering to the page, it should be displayed like this:
June
No. 23 Amount: 3000 Category: RMB
No. 24 Amount: 4000 Category: RMB
July
Amount of No. 23: 3000 Category: RMB
No. 24 Amount: 4000 Category: RMB
25 Amount: 5000 Category: RMB

欧阳克欧阳克2739 days ago832

reply all(2)I'll reply

  • 習慣沉默

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

    Finally convert the data format into:

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

    Then render using two ng-repeat.

    As for the ideas:

    1. Convert to an object first:

      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. Then iterate through the object and convert it into an array.

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

    reply
    0
  • 淡淡烟草味

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

    Although you can use array filtering and matching to split time into the format you want, considering efficiency issues, I recommend processing these on the server side and returning the data format you want. If there is no other way, consider the data again. Classification processing

    reply
    0
  • Cancelreply