How to use groupBy data based on the server and display it in ag-grid - angular

How to group the data based on the server name which is the object key server?

here's the code:

    rowData = [
        {
          server: "Server 1",
          ping: "10 ms",
          dl: "50Mbit/s",
          ul: "50Mbit/s",
          ispcon: true,
          dateStart: "2019-10-12 09:00:00",
          datteEnd: "2019-10-12 09:05:000"
        },
        {
          server: "Server 1",
          ping: "10 ms",
          dl: "50Mbit/s",
          ul: "50Mbit/s",
          ispcon: true,
          dateStart: "2019-10-12 09:00:00",
          datteEnd: "2019-10-12 09:05:000"
        },
        {
          server: "Server 1",
          ping: "10 ms",
          dl: "50Mbit/s",
          ul: "50Mbit/s",
          ispcon: true,
          dateStart: "2019-10-12 09:00:00",
          datteEnd: "2019-10-12 09:05:000"
        },
        {
          server: "Server 1",
          ping: "10 ms",
          dl: "50Mbit/s",
          ul: "50Mbit/s",
          ispcon: true,
          dateStart: "2019-10-12 09:00:00",
          datteEnd: "2019-10-12 09:05:000"
        },
        {
          server: "Server 1",
          ping: "10 ms",
          dl: "50Mbit/s",
          ul: "50Mbit/s",
          ispcon: true,
          dateStart: "2019-10-12 09:00:00",
          datteEnd: "2019-10-12 09:05:000"
        },
        {
          server: "Server 1",
          ping: "10 ms",
          dl: "50Mbit/s",
          ul: "50Mbit/s",
          ispcon: true,
          dateStart: "2019-10-12 09:00:00",
          datteEnd: "2019-10-12 09:05:000"
        },
        {
          server: "Server 1",
          ping: "10 ms",
          dl: "50Mbit/s",
          ul: "50Mbit/s",
          ispcon: true,
          dateStart: "2019-10-12 09:00:00",
          datteEnd: "2019-10-12 09:05:000"
        },
        {
          server: "Server 1",
          ping: "10 ms",
          dl: "50Mbit/s",
          ul: "50Mbit/s",
          ispcon: true,
          dateStart: "2019-10-12 09:00:00",
          datteEnd: "2019-10-12 09:05:000"
        },
        {
          server: "Server 1",
          ping: "10 ms",
          dl: "50Mbit/s",
          ul: "50Mbit/s",
          ispcon: true,
          dateStart: "2019-10-12 09:00:00",
          datteEnd: "2019-10-12 09:05:000"
        },
        {
          server: "Server 2",
          ping: "10 ms",
          dl: "50Mbit/s",
          ul: "50Mbit/s",
          ispcon: true,
          dateStart: "2019-10-12 09:00:00",
          datteEnd: "2019-10-12 09:05:000"
        },
        {
          server: "Server 2",
          ping: "10 ms",
          dl: "50Mbit/s",
          ul: "50Mbit/s",
          ispcon: true,
          dateStart: "2019-10-12 09:00:00",
          datteEnd: "2019-10-12 09:05:000"
        }
      ];

output should be like this.

[
{
 server: "Server 1",
 data: [
  {
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
  },{
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
  },{
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
  },{
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
  },{
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
  },{
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
  },{
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
  },{
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
  },{
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
  }
 ]
 },
{
 server: "Server 2",
 data: [
{
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
    },
    {
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
    }
]
}
]

What I want is to group the data based on the server, example when the data and it server is "Server 1" it should group the data who has a server "Server 1".

and how to display it in ag-grid (master detail). https://stackblitz.com/edit/ag-grid-angular-hello-world-xabqct?file=src/app/app.component.ts

output should be like this. enter image description here

Thanks in advance

1 answer

  • answered 2020-01-14 02:07 Christian Carrillo

    Solution:

    const rowData = [
    {
      server: "Server 1",
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
    },
    {
      server: "Server 1",
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
    },
    {
      server: "Server 1",
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
    },
    {
      server: "Server 1",
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
    },
    {
      server: "Server 1",
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
    },
    {
      server: "Server 1",
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
    },
    {
      server: "Server 1",
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
    },
    {
      server: "Server 1",
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
    },
    {
      server: "Server 1",
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
    },
    {
      server: "Server 2",
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
    },
    {
      server: "Server 2",
      ping: "10 ms",
      dl: "50Mbit/s",
      ul: "50Mbit/s",
      ispcon: true,
      dateStart: "2019-10-12 09:00:00",
      datteEnd: "2019-10-12 09:05:000"
    }
    ];
    
    		
    const result = rowData.reduce((acc, item) => {
      if (acc.findIndex(a => a.server === item.server) === -1) {
        acc.push({server: item.server, data: []})
      }
      const currentIndex = acc.findIndex(a => a.server === item.server)
    
      delete item['server']
      acc[currentIndex].data.push(item)
    
      return acc
    }, [])
    
    console.log(result)