How to group by server in Angular

Question

here's the code:

list.component.ts

 data = [   {
          "id": 19,
          "server": "Server 1",
          "dl": "35.88 Mbit/s",
          "ul": "46.76 Mbit/s",
        },
        {
          "id": 30,
          "server": "Server 1",
          "dl": "45.06 Mbit/s",
          "ul": "48.25 Mbit/s",
        },
        {
          "id": 26,
          "server": "Server 1",
          "dl": "47.96 Mbit/s",
          "ul": "47.89 Mbit/s",
        } ]

how to group the Server 1?

the output should be

{
   server: 'Server 1',
   data: [
{
              "id": 19,
              "dl": "35.88 Mbit/s",
              "ul": "46.76 Mbit/s",
            },
            {
              "id": 30,
              "dl": "45.06 Mbit/s",
              "ul": "48.25 Mbit/s",
            },
            {
              "id": 26,
              "dl": "47.96 Mbit/s",
              "ul": "47.89 Mbit/s",
            }
]
}

I think I didn't understand your question. What do you mean by group? — Waseem Ahmad Naeem, Jan 03 '20 at 05:57
I don't know why you are not using "lodash" lib like this _.groupBy(data, "server"). — Ashok, Jan 03 '20 at 06:01

score 1 · Answer 1 · answered Jan 03 '20 at 05:54

You can use array.reduce() to group by server and Spread syntax to get other object fields:

let data = [   {
          "id": 19,
          "server": "Data1",
          "dl": "35.88 Mbit/s",
          "ul": "46.76 Mbit/s",
        },
        {
          "id": 30,
          "server": "Data1",
          "dl": "45.06 Mbit/s",
          "ul": "48.25 Mbit/s",
        },
        {
          "id": 26,
          "server": "Data1",
          "dl": "47.96 Mbit/s",
          "ul": "47.89 Mbit/s",
        } ]
        
 let result = data.reduce((state,current) => {
     let {server, ...others} = current;
     if(state[server]){
         state[server].push(others);
     } else {
         state[server] = [others];
     }
     return state;
 }, {});
 
 console.log(result);

jitendra kumar · Answer 2 · 2020-01-03T07:43:55.870

You can also group data using forEach.

let data = [
  {
    "id": 19,
    "server": "Data1",
    "dl": "35.88 Mbit/s",
    "ul": "46.76 Mbit/s",
  },
  {
    "id": 30,
    "server": "Data1",
    "dl": "45.06 Mbit/s",
    "ul": "48.25 Mbit/s",
  },
  {
    "id": 26,
    "server": "Data1",
    "dl": "47.96 Mbit/s",
    "ul": "47.89 Mbit/s",
  },
  {
    "id": 36,
    "server": "Data2",
    "dl": "41.98 Mbit/s",
    "ul": "41.82 Mbit/s",
  }
];

const groupedArray = (arr) => {
  let newArray = {};
  data.forEach(obj => {
    if(newArray[obj['server']] == undefined){
      newArray[obj['server']] = [ obj ];
    } else{
      newArray[obj['server']].push(obj);
    }
  });
  return newArray;
}

let newData = groupedArray(data);
console.log(newData);

How to group by server in Angular

2 Answers2