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.

Answer 1

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

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 .

Answer 2

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