How to insert new interface types into an array in typescript

Question

What i'm trying to achieve is to have this structure type:

let chartDataSets: Array<ChartDataSets> = new Array<ChartDataSets>();
chartDataSets = [
                {
                    backgroundColor: "#29b6f6",
                    borderColor: "#0086c3",
                    pointHoverBorderColor: "#0086c3",
                    pointHoverBackgroundColor: "#73e8ff",
                    pointRadius: 3.5,
                    fill: false
                },
                {
                    backgroundColor: "#f44336",
                    borderColor: "#ba000d",
                    pointHoverBorderColor: "#ba000d",
                    pointHoverBackgroundColor: "#ff7961",
                    pointRadius: 3.5,
                    fill: false
                }
            ]

By doing this:

data.forEach(element => {
                chartDataSets.push(this.buildDatasets(element, timeSpan));
            });
otherData.forEach(otherElement => {
                chartDataSets.push(this.buildDatasets(otherElement, timeSpan));
            });

I've to do this in that way because I don't know how many objects the array will have. So I need to iterate through the data returned from a service in order to know how many objects there are going to be in the array. But what I achieve with the push command is to generate only an array of one object instead of generating multiple objects of ChartDataSets into the array.

Here are the interfaces declaration:

export interface ServiceResponse {
    Date: Date;
    Amount: number;
    Precision: number;
}

export interface ChartDatasets {
     data: ChartPoint[],
     backgroundColor: string,
     borderColor: string,
     pointHoverBorderColor: string,
     pointHoverBackgroundColor: string,
     pointRadius: number,
     fill: boolean
}

export interface ChartPoint {
    x: number | string | Date
    y: number
}

the method buildChartDatasets declaration:

protected buildDatasets(element: EacSubmissionResponseModel, timeSpan: TimeSpan = TimeSpan.Day): ChartDataSets {
        let chartDataset: ChartDataSets = {};

        let chartResponse: ChartPoint[] = [{
            x: element.Date,
            y: element.Amount
        }]

        chartDataset.data = chartResponse;

        return chartDataset;
    }

This is the response that I get, shown in chrome developer tools:

The first one is the desired result, the second one is what I actually got. Hope this is clear enough.

can you show us the declaration of the type ChartDataSets ? — Mohamed Ali RACHID
– Mohamed Ali RACHID, Commented Mar 8, 2018 at 20:54
Yeah, can you provide that type and details around your this.buildDatasets method. Also, you can use a syntax like this to clean that up a little const chartDataSets = data.concat(otherData).map(e => this.buildDatasets(e, timeSpan)); — Daniel W Strimpel
– Daniel W Strimpel, Commented Mar 8, 2018 at 20:58
ChartDatasets contains all the properties you see in the first example. Just in order to get type checking. Buildchartdatasets method Maps some of the entity returned by the service — Juanma
– Juanma, Commented Mar 8, 2018 at 21:13

Thibault Henry · Accepted Answer · 2018-03-08 20:59:17Z

1

So if I understand well, you have a service returning your data and otherData variables, which are arrays of elements.

Then you have to individually supply each element to this.buildDatasets to get a ChartDataSets, and then push every returned value to your chartDataSets Array.

Which means that this.buildDatasets has the following signature :

buildDatasets(element: T, timeSpan): ChartDataSets

With type T being the type of each element returned. So data and otherData must be of type T[].

Please check the type of your data variable, and the return type of this.buildDatasets.

answered Mar 8, 2018 at 20:59

Thibault Henry

4814 silver badges12 bronze badges

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

3 Comments

Juanma Over a year ago

Yes indeed the element parameter is of type ServiceResponse and te return type of the method is ChartDatasets. They are both like you said but I keep getting only an array of one object

Thibault Henry Over a year ago

Can you provide the interface declaration of ServiceResponse and ChartDataSets, the source code of buildDatasets, an example of the data variable and the chartDataSets array that is generated from it ?

Juanma Over a year ago

I've edited my original question, please tell me if you need more info

Juanma · Accepted Answer · 2018-03-09 14:42:11Z

0

I could solve my problem, this is the way I did it:

let chartDataSets: Array<ChartDataSets> = new Array<ChartDataSets>();
let chartPoints: Array<ChartPoint> = new Array<ChartPoint>();

this._service.getData().subscribe(data => {
   data.forEach(element => {
       chartPoints.push(this.buildDatasets(element, timeSpan));
   });

   chartDataSets.push({
       data: chartPoints
   })
});

this is the signature for buildDatasets:

protected buildDatasets(element: EacSubmissionResponseModel, timeSpan: TimeSpan = TimeSpan.Day): ChartPoint

answered Mar 9, 2018 at 14:42

Juanma

9253 gold badges11 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to insert new interface types into an array in typescript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related