Create chart array with array.map() or array.reduce()

Question

I have this array:

this.list = [
      { id: 12, status: 2, number: 10 },
      { id: 2, status: 2, number: 300 },
      { id: 2, status: 2, number: 12 },
      { id: 4, status: 2, number: 65 },
      { id: 6, status: 2, number: 129 },
      { id: 7, status: -100, number: 21 },
      { id: 7, status: 2, number: 2 },
      { id: 7, status: 3, number: 3 },
      { id: 7, status: 4, number: 76 },
      { id: 8, status: -100, number: 77 },
      { id: 8, status: 2, number: 48 },
      { id: 8, status: 3, number: 17 },
      { id: 8, status: 4, number: 14 },
      { id: 8, status: 6, number: 10 },
      { id: 8, status: 7, number: 5 },
      { id: 8, status: 8, number: 5 },
      { id: 8, status: 9, number: 4 },
      { id: 9, status: 2, number: 140 },
      { id: 9, status: 9, number: 1 },
      { id: 11, status: 2, number: 141 },
      { id: 15, status: 2, number: 86 },
      { id: 19, status: 2, number: 71 },
      { id: 17, status: 2, number: 141 }
    ];

I need generate chart with ng2-charts. How I can map my array to charts array?

example:

  public barChartLabels: number[] = [unique number from list.status];
  public barChartType: string = 'bar';
  public barChartLegend: boolean = true;

  public barChartData: any[] = [
    { data: [list.number], label: 'unique list.id' },
    { data: [list.number], label: 'unique list.id' },
    { data: [list.number], label: 'unique list.id' },
    { data: [list.number], label: 'unique list.id' },
    { data: [list.number], label: 'unique list.id' },
    { data: [list.number], label: 'unique list.id' },
    { data: [list.number], label: 'unique list.id' },
    { data: [list.number], label: 'unique list.id' },
    { data: [list.number], label: 'unique list.id' },
    { data: [list.number], label: 'unique list.id' },
    { data: [list.number], label: 'unique list.id' }
  ];

In data I need array list.number group by id and group by label: list.id when no have number for this status I need paste list.number = 0

How I can do this ?

you want to turn your first array `list` into the same array but group by id ? `_.groupBy(list, function(l){return l.id})` — robinvrd, Aug 10 '18 at 10:46
Yes but whit group by I can group by one list.property but i need group by multiple elements (list.id, list.status) and sum numbers by id and status. — cccccc111, Aug 10 '18 at 11:19

score 0 · Answer 1 · answered Aug 10 '18 at 10:49

You can use Array.reduce() to get that output structure:

var arr = [{
    id: 12,
    status: 2,
    number: 10
  },
  {
    id: 2,
    status: 2,
    number: 300
  },
  {
    id: 2,
    status: 2,
    number: 12
  },
  {
    id: 4,
    status: 2,
    number: 65
  },
  {
    id: 6,
    status: 2,
    number: 129
  },
  {
    id: 7,
    status: -100,
    number: 21
  },
  {
    id: 7,
    status: 2,
    number: 2
  },
  {
    id: 7,
    status: 3,
    number: 3
  },
  {
    id: 7,
    status: 4,
    number: 76
  },
  {
    id: 8,
    status: -100,
    number: 77
  },
  {
    id: 8,
    status: 2,
    number: 48
  },
  {
    id: 8,
    status: 3,
    number: 17
  },
  {
    id: 8,
    status: 4,
    number: 14
  },
  {
    id: 8,
    status: 6,
    number: 10
  },
  {
    id: 8,
    status: 7,
    number: 5
  },
  {
    id: 8,
    status: 8,
    number: 5
  },
  {
    id: 8,
    status: 9,
    number: 4
  },
  {
    id: 9,
    status: 2,
    number: 140
  },
  {
    id: 9,
    status: 9,
    number: 1
  },
  {
    id: 11,
    status: 2,
    number: 141
  },
  {
    id: 15,
    status: 2,
    number: 86
  },
  {
    id: 19,
    status: 2,
    number: 71
  },
  {
    id: 17,
    status: 2,
    number: 141
  }
];

var res = arr.reduce((acc, item) => {
  var existItem = acc.find(({label}) => label === item.id);
  if (existItem) {
    existItem.data.push(item.number);
  } else {
    acc.push({
      data: [item.number],
      label: item.id
    });
  }
  return acc;
}, []);
console.log(res);

Yes but I need group data by list.status and list.id. Have idea how I can do this ? — cccccc111, Aug 10 '18 at 11:17
@cccccc111 where is the status in the expected output you have provided? — Ankit Agarwal, Aug 10 '18 at 11:19
i need compare list.status with distinctStatusList because data must be group by one list.id and one list.status — cccccc111, Aug 10 '18 at 11:29

score 0 · Answer 2 · answered Aug 10 '18 at 10:56

0

You can use reduce() and map(), like this:

  //Grouping numbers by ID
let ids_to_data = yourListDataArray.reduce(function(obj,item) {
   obj[item.id] = obj[item.id] || [];
   obj[item.number].push(item.number);
   return obj;}, {});

 // Map() to the format you want 
let barChartData = Object.keys(ids_to_data).map( function(key) {
return {data: ids_to_data[key], label: key} })

answered Aug 10 '18 at 10:56

Ethan Vu

2,911
9
25

I added the explanation below. – cccccc111 Aug 10 '18 at 11:53
Oh in that case I think this thread have your answer : https://stackoverflow.com/questions/46794232/group-objects-by-multiple-properties-in-array-then-sum-up-their-values – Ethan Vu Aug 10 '18 at 19:22
Yes, but i need create chart array from my array. This post show how I can group by my data. – cccccc111 Aug 11 '18 at 20:41

score 0 · Answer 3 · answered Aug 10 '18 at 11:45

I have this array:

this.list = [
      { id: 12, status: 2, number: 10 },
      { id: 2, status: 2, number: 300 },
      { id: 2, status: 2, number: 12 },
      { id: 4, status: 2, number: 65 },
      { id: 6, status: 2, number: 129 },
      { id: 7, status: -100, number: 21 },
      { id: 7, status: 2, number: 2 },
      { id: 7, status: 3, number: 3 },
      { id: 7, status: 4, number: 76 },
      { id: 8, status: -100, number: 77 },
      { id: 8, status: 2, number: 48 },
      { id: 8, status: 3, number: 17 },
      { id: 8, status: 4, number: 14 },
      { id: 8, status: 6, number: 10 },
      { id: 8, status: 7, number: 5 },
      { id: 8, status: 8, number: 5 },
      { id: 8, status: 9, number: 4 },
      { id: 9, status: 2, number: 140 },
      { id: 9, status: 9, number: 1 },
      { id: 11, status: 2, number: 141 },
      { id: 15, status: 2, number: 86 },
      { id: 19, status: 2, number: 71 },
      { id: 17, status: 2, number: 141 }
    ];

and charts need two arrays:

public barChartLabels: number[] = axis y (I need here unique status);
public barChartData: any[] = [{ data: [65, 59, 0, 81], label: 'Series A' }];

How I can create chart array from my array? data[] must be group by list.id and list.status and sum list.number

example:

{id: 1, status: 4, number: 300},
{id: 1, status: 4, number: 12},

when i group example by id and status and sum number i get:

{id: 1, status: 4, number: 312},

I need compare status from list with status from beChartLabels because data[0].status must by the same by beChartLabels[0]

How I can do this ?

Anyone can help ? I cant resolve this problem about two days. — cccccc111, Aug 12 '18 at 14:53

Create chart array with array.map() or array.reduce()

3 Answers3