Angular 5 create An array with from JSON data and sum values

Question

I am trying to create data to display in chart (2 lines), but I am having issues.

I have tried several reduce methods found here, but I was not able to do that.

My Json is :

{
  createdDate: "2017-11-17",
  doneDate: "2017-11-17",
},
{
  createdDate: "2017-11-17",
  doneDate: "2017-11-17",
},
{
  createdDate: "2017-11-17",
  doneDate: "2017-11-18",
},
{
  createdDate: "2017-11-18",
  doneDate: "2017-11-18",
},
{
  createdDate: "2017-11-19",
  doneDate: "2017-11-19",
},
{
  createdDate: "2017-11-19",
  doneDate: "2017-11-19",
},
{
  createdDate: "2017-11-20",
  doneDate: "2017-11-20",
},
{
  createdDate: "2017-11-20",
  doneDate: "2017-11-21",
},

I have created an interface :

export interface myObject 
{   
  createdDate: Date;   
  doneDate: Date; 
}

What I am trying to do is have an table with:

Date; created; done
2017-11-17;3;2
2017-11-18;1;2
2017-11-19;2;2
2017-11-20;2;1
2017-11-21;0;1

I would appreciate any help, even if it like showing me where I can document myself to do this.

Show us the reduce methods you have attempted so far, please. — R. Richards
– R. Richards, Commented Apr 15, 2018 at 13:48

Tomasz Kula · Accepted Answer · 2018-04-15 14:32:33Z

1

Assuming your example data is saved in the arr variable.

export interface Timestamp {
 createdDate: string;
 doneDate: string;
}

const createdCount = arr.reduce((acc: any, { createdDate }): Timestamp => {
  acc[createdDate] = acc[createdDate] === undefined ? 1 : acc[createdDate] + 1;
  return acc;
}, {});

const doneCount = arr.reduce((acc: any, { doneDate }): Timestamp => {
  acc[doneDate] = acc[doneDate] === undefined ? 1 : acc[doneDate] + 1;
  return acc;
}, {});

const dates = arr.reduce((acc: any, { createdDate, doneDate }) => {
  return Array.from(new Set([...acc, createdDate, doneDate]));
}, []);

const result = dates.reduce((acc: any, date) => {
  acc[date] = {
    created: createdCount[date] || 0,
    done: doneCount[date] || 0,
  }
  return acc;
}, {});

Live demo

answered Apr 15, 2018 at 14:32

Tomasz Kula

16.9k3 gold badges72 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

testeurFou Over a year ago

I'll try it asap.. thanks for taking time to answer me...on a sunday... :)

testeurFou Over a year ago

Hi, I have a question, how do I extract this for a chart data, Example : x-axis [2017-11-17,2017-11-18,...] created[3,1,2,2,0,...] done[2,2,2,1,1,....] Sorry for this noob question

Rip3rs · Accepted Answer · 2018-04-15 14:14:12Z

0

that is not making sense to me.

you can have a key in a json file which is an array of object:

{
  "arrayOdOobjects": [
    {
      "createdDate": "2017-11-17",
      "doneDate": "2017-11-17"
    },
    {
      "createdDate": "2017-11-17",
      "doneDate": "2017-11-17"
    },
    {
      "createdDate": "2017-11-17",
      "doneDate": "2017-11-18"
    },
    {
       "createdDate": "2017-11-18",
       "doneDate": "2017-11-18"
    },
    {
       "createdDate": "2017-11-19",
       "doneDate": "2017-11-19"
    },

  ]
}

then you can grab the json by importing in the .ts component file:

var json = require('./arrayofobjects.json');

then iterate it (there is other ways but I think this is the visually more simple):

export class FooComponent implements OnInit {
  jsonArray = json.arrayOfObjects;
  array = [];
  constructor() { }

  ngOnInit() {
    this.jsonArray.forEach(obj => {
      this.array.push([new Date(), obj.createdDate, obj.doneDate]);
    });

    console.log(this.array)
  }
}

Or I completely miss interpreted the question? ^^ Hope it helps

answered Apr 15, 2018 at 14:14

Rip3rs

1,58013 silver badges22 bronze badges

1 Comment

testeurFou Over a year ago

Thanks for helpin, the answer below seems to be what I need.. I'll look into it ...

Manish Chugh · Accepted Answer · 2018-04-15 14:26:04Z

0

I suppose you are looking for something like this and your JSON data will satisfy data format for Amcharts without any need to change

sample data -

{ "date1": "2014-12-02", "y1": "2014-12-02 06:24" }, { "date1": "2014-12-04", "y1": "2014-12-02 06:39" }, { "date1": "2014-12-06", "y1": "2014-12-02 07:05" }, { "date1": "2014-12-08", "y1": "2014-12-02 08:15" }, { "date1": "2014-12-09", "y1": "2014-12-02 08:56" }

Please check Amcharts example here

edited Apr 15, 2018 at 14:26

answered Apr 15, 2018 at 14:20

Manish Chugh

12 bronze badges

Collectives™ on Stack Overflow

Angular 5 create An array with from JSON data and sum values

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related