Angular - group data

Question

I pulled out the data from the database using JSON and received the data as below.

    var data = [
  {
    "view_id": "999999999",
    "month" : 01,
    "year" : 2017,
    "visit" : 2000
  },
  {
    "view_id": "999999999",
    "month" : 02,
    "year" : 2017,
    "visit" : 3000
  },
  {
    "view_id": "999999999",
    "month" : 01,
    "year" : 2018,
    "visit" : 4000
  },
   {
    "view_id": "999999999",
    "month" : 02,
    "year" : 2018,
    "visit" : 9000
  },
  {
    "view_id": "000000000",
    "month" : 01,
    "year" : 2017,
    "visit" : 6000
  },
  {
    "view_id": "000000000",
    "month" : 02,
    "year" : 2017,
    "visit" : 7000
  },
  {
    "view_id": "000000000",
    "month" : 01,
    "year" : 2018,
    "visit" : 12000
  },
  {
    "view_id": "000000000",
    "month" : 02,
    "year" : 2018,
    "visit" : 15000
  },
];

I would like to present the data in the table:

Table

However, my problem is to group the data so that it is for the given view_id and year.

Can you help me in this way to show me in the table as I showed you?

You can try [this](https://stackoverflow.com/a/42136295/7046389) for the group by. — vangoo, Jul 31 '18 at 08:38
Use https://danrevah.gitbooks.io/angular-pipes. it's very useful for this case.It allows you to group by multiple valus https://danrevah.gitbooks.io/angular-pipes/#groupby — Houssem Romdhani, Jul 31 '18 at 08:55

score 0 · Answer 1 · answered Jul 31 '18 at 08:50

Assuming, that the list is always ordered by view_id and date/year, this could be a solution:

var data = [
                {
                  "view_id": "999999999",
                  "month" : '01',
                  "year" : 2017,
                  "visit" : 2000
                },
                 {
                  "view_id": '999999999',
                  "month" : '02',
                  "year" : 2018,
                  "visit" : 9000
                },
                {
                  "view_id": '000000000',
                  "month" : '01',
                  "year" : 2018,
                  "visit" : 12000
                },
                {
                  "view_id": '000000000',
                  "month" : '02',
                  "year" : 2018,
                  "visit" : 15000
                },
              ];
              let last_view_id = '';
              let newData = [];
              data.forEach(element => {
                  
                  if(last_view_id === element.view_id) {
                    newData[(newData.length-1)].view_data.push(element);
                  } else {
                      last_view_id = element.view_id;
                      newData.push({
                          view_id: element.view_id,
                          view_data: [element]
                      });
                  }
              });
              console.log(newData);

That's code for Angular 2+. You said you need solution for Angular 2+ — Adel, Aug 01 '18 at 09:35

Angular - group data

1 Answers1