group and count objects of array and create new array

Question

I am using reactJS and have an dynamic array of object from an response which looks like the following:

[{ year: 2016, origin: "EN", type: "new" }, { year: 2016, origin: "EN", type: "old" }, { year: 2016, origin: "EN", type: "used" }, { year: 2016, origin: "EN", type: "new" }, { year: 2016, origin: "EN", type: "broken" }, { year: 2016, origin: "EN", type: "used" } ]

The dynamic array can have to up to many different types but I have only 3 colors to use in my dashboard (ok, warning, critical). Its not a problem if the color is used multiple times!

I would like to create a new array for my dashboard to group and count my response and merge it with the colors to get the following result:

[{ name: "new", value: 2, color: 'ok' }, { name: "old", value: 1, color: 'warning' }, { name: "broken", value: 1, color: 'critical' }, { name: "used", value: 2, color: 'ok' }]

So, first of all I need to group them, count the objects in the groups, select an color and then create a new array.

(Note: I would not like to use extra javascript libraries like LINQ.js )

Could yo help me please?

What property do you want to group by? Where name of 2nd array matches type of first array? — mhodges, Jun 18 '18 at 15:41
@mhodges I want to group the type and rename it for using it in my dashboard. — frosty4321, Jun 18 '18 at 16:26
@Eddie The color assignment is for an Chart. The chart need the arguments name, value and color. — frosty4321, Jun 18 '18 at 16:28

Eddie · Answer 1 · 2018-06-18T17:09:32.797

2

You can use reduce to group the arrays into an object. Use Object.values to convert the object into an array.

You can define the colors on an object using the type as the key.

let arr = [{ year: 2016, origin: "EN", type: "new" }, { year: 2016, origin: "EN", type: "old" }, { year: 2016, origin: "EN", type: "used" }, { year: 2016, origin: "EN", type: "new" }, { year: 2016, origin: "EN", type: "broken" }, { year: 2016, origin: "EN", type: "used" } ] 
let colors = {'new' : 'ok', 'old' : 'warning', 'broken' : 'critical', 'used' : 'ok'}

let result = Object.values(arr.reduce((c, {type}) => {
  c[type] = c[type] || {name: type,value: 0,color: colors[type]};
  c[type].value++;
  return c;
}, {}))

console.log(result);

Choosing the colors randomly:

let arr = [{ year: 2016, origin: "EN", type: "new" }, { year: 2016, origin: "EN", type: "old" }, { year: 2016, origin: "EN", type: "used" }, { year: 2016, origin: "EN", type: "new" }, { year: 2016, origin: "EN", type: "broken" }, { year: 2016, origin: "EN", type: "used" } ] 
let colors = ['ok', 'warning', 'critical'];

let result = Object.values(arr.reduce((c, {type}) => {
  c[type] = c[type] || {name: type,value: 0,color: colors[Math.floor(Math.random() * colors.length)]};
  c[type].value++;
  return c;
}, {}))

console.log(result);

edited Jun 18 '18 at 17:09

answered Jun 18 '18 at 15:46

Eddie

26,593
6
36
58

I tried your code and it works really good. Thanks! Do you know how I can handle the problem if I can't define the color on an object. Sometimes my first array has more than just the 4 types. – frosty4321 Jun 18 '18 at 16:32
@frosty4321 What is the logic on assigning the colors? – Eddie Jun 18 '18 at 16:33
I only need the color for an Chart. The chart need the arguments name, value and color. So I'm trying to give the chart just some standard colors but they can pick random. – frosty4321 Jun 18 '18 at 16:37
@frosty4321 I added a new block for choosing the colors randomly. – Eddie Jun 18 '18 at 16:43
1

Should probably be `Math.random() * colors.length` in case the number of colors is not static – mhodges Jun 18 '18 at 17:08

group and count objects of array and create new array

1 Answers1

Linked