In angular group array of objects from response?

Question

Group array of objects from response.

I have response like this.

[ {name:someName, value:20},
  {name:"", value:21}
  {name:someName, value:25}
  {name:someName , value:27}
  {name:"", value:21}
  {name:someName, value:20}
]

I want to group like this.

 [    {name:someName, value:20},
      {name:"", value:42}
      {name:someName, value:25}
      {name:someName , value:27}          
      {name:someName, value:20}
    ]

I tried with filter, reduce functions in Js

You want only empty name to summed ? or the all the repeated names ? — Code Maniac, Feb 25 '19 at 12:47
Please clarify your question and also add the code that you have tried. — Amit Chigadani, Feb 25 '19 at 12:49
Possible duplicate of [javascript | Object grouping](https://stackoverflow.com/questions/21776389/javascript-object-grouping) — HMR, Feb 25 '19 at 12:51

Alex G · Accepted Answer · 2019-02-25T13:03:55.857

0

You can try this with reduce:

const data = [ 
  {name: 'someName', value:20},
  {name: "", value:21},
  {name: 'someName1', value:25},
  {name: 'someName' , value:27},
  {name: "", value:21},
  {name: 'someName1', value:20},
];

const group = (data) =>

 data.reduce((acc, { name, value }) => {
  
  const item = acc.find((el) => el.name === name);

  if (item) item.value += value;

  else acc.push({ name, value });
  
  return acc;
 }, []);

console.log(group(data));

If you only want to group empty names find should be:

const item = acc.find((el) => el.name === name && !name);

as empty strings are falsy values.

edited Feb 25 '19 at 13:03

answered Feb 25 '19 at 12:54

Alex G

1,897
2
10
15

Thanks Alex G. Can you explain why you used this {name, value} ? – Daniel Feb 25 '19 at 13:51
@Daniel It's argument destructuring so you can reference object properties directly. Instead of arg.prop, you use prop. You can read more here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment – Alex G Feb 25 '19 at 13:55

score 0 · Answer 2 · answered Feb 25 '19 at 13:03

You could reduce to a Map then use the values of that map and use Array.prototype.map with reduce again to summarize the groups:

const data = [
  { name: 'a', value: 20 },
  { name: '', value: 21 },
  { name: 'a', value: 25 },
  { name: 'b', value: 27 },
  { name: '', value: 21 },
  { name: 'c', value: 20 },
];

console.log(
  [
    ...data
      .reduce(
        (result, item) =>
          result.set(
            item.name,
            (result.get(item.name) || []).concat(item),
          ),
        new Map(),
      )
      .values(),
  ].map((items) =>
    items.reduce(
      (result, item) =>
        console.log(result, item) || {
          name: item.name,
          value: item.value + result.value,
        },
    ),
  ),
);

In angular group array of objects from response?

2 Answers2