Reduce an array of object with same key and concat same property

Question

I have an array of objects in the below form it has three properties serviceName, pool, and environment I want to group the object based on environment and at the same time need to concat the pools:

const data = [
  {
    serviceName: "visa",
    pool: "3g",
    environment: "test-int",
  },
  {
    serviceName: "visa",
    pool: "4g",
    environment: "test-int",
  },
  {
    serviceName: "visa",
    pool: "5g",
    environment: "test-int",
  },
  {
    serviceName: "amex",
    pool: "5g",
    environment: "dev",
  },
  {
    serviceName: "amex",
    pool: "6g",
    environment: "dev",
  },
];

I want the output in the below format:

const output = [
    {
      serviceName: "visa",
      pool: "3g,4g,5g",
      environment: "test-int"
    },
    {
      serviceName: "amex",
      pool: "5g,6g",
      environment: "dev"
    },
  ]

Based on my current code it just returns a single object instead of an array of objects:

const output = data.reduce((acc, ar) => {
      let res = {
        ...acc,
        pool: acc["pool"] + "," + ar.pool
      };
      return res;
    }
  });

What's not working here? Did you get console errors? Is this in a browser or backend? Please clarify where you are having problems. — mr rogers
– mr rogers, Commented Apr 24, 2022 at 22:57
@mrrogers i just joined StackOverflow so was figuring out how to format the code i have added the required details — giiyiraj
– giiyiraj, Commented Apr 24, 2022 at 23:11
pool is probably more useful as an array instead of a string. Also reduce() returns a single result as you've already experienced. — zer00ne
– zer00ne, Commented Apr 24, 2022 at 23:14

mr rogers · Accepted Answer · 2022-04-24 23:21:54Z

I think the basic problem is that you need to segment out all the elements that match by serviceName and then do your reduce to join the pool value.

Maybe something like this:

const res = [
    {
      serviceName: "visa",
      pool: "3g",
      environment: "test-int"
    },
    {
      serviceName: "visa",
      pool: "4g",
      environment: "test-int"
    },
    {
      serviceName: "amex",
      pool: "5g",
      environment: "dev"
    },
    {
      serviceName: "amex",
      pool: "6g",
      environment: "dev"
    }
  ];

const groupBy = (arr, getKey) => {
  return arr.reduce((memo, item) => {
    const key = getKey(item)
    memo[key] ||= [];
    memo[key].push(item);
    return memo;
    
  }, {})
}

const byServiceName = groupBy(res, ({serviceName}) => serviceName);

const results = Object.values(byServiceName).map((items) => {
   return items.reduce((acc, item) => {
     let res = {
        ...acc,
        pool: acc["pool"] + "," + item.pool
      };
      return res;
    })
});

console.log(results)

The groupBy function could be simplified to not take the getKey function, but that adds a little flexibility. If you know it's always going to be on serviceName, you could instead have something like

const groupByServiceName = (arr) => {
  const key = 'serviceName'
  return arr.reduce((memo, item) => {
    memo[key] ||= [];
    memo[key].push(item);
    return memo;
}, {})

vanowm · Accepted Answer · 2022-04-24 23:42:28Z

1

Here is a method that generates an object with environment value as key and then extracts its values into array

const data = [
  {
    serviceName: "visa",
    pool: "3g",
    environment: "test-int",
  },
  {
    serviceName: "visa",
    pool: "4g",
    environment: "test-int",
  },
  {
    serviceName: "visa",
    pool: "5g",
    environment: "test-int",
  },
  {
    serviceName: "amex",
    pool: "5g",
    environment: "dev",
  },
  {
    serviceName: "amex",
    pool: "6g",
    environment: "dev",
  },
];

const output = Object.values(data.reduce((acc, ar) =>
{
  if (acc[ar.environment])
    acc[ar.environment].pool += "," + ar.pool;
  else
    acc[ar.environment] = {...ar};

  return acc;
},{}));

console.log(output);

edited Apr 24, 2022 at 23:42

answered Apr 24, 2022 at 23:29

vanowm

10.4k2 gold badges30 silver badges50 bronze badges

2 Comments

mr rogers Over a year ago

Interesting. Same as my solution except keyed by environment. I guess it's not clear, @giiyiraj, which thing is the "grouping" criteria. I assumed it was serviceName but I guess it could be either... or both.

giiyiraj Over a year ago

The problem statement is "Given a list of services I want to group the services deployed based on environments and add the pools so basically as we see between the two same services the field that's different is the pool so wanted to reduce it to a single field instead of displaying multiple records in the UI"

Collectives™ on Stack Overflow

Reduce an array of object with same key and concat same property

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related