Data Mapping In Typescript

Question

I have two static data sets. I would like to implement them dynamically with an API but I can not format them to the expected type.

This is the first data set:

export let lineChartSeries = [
    {
        name: 'Cumulative',
        series: [
            {
                name: '2022-06-01',
                value: 50
            },
            {
                name: '2022-05-01',
                value: 80
            },
            {
                name: '2022-04-01',
                value: 85
            },
            {
                name: '2022-03-01',
                value: 90
            },
            {
                name: '2022-02-01',
                value: 100
            }
        ]
    }
];

This is the second data set :

export let barChart: any = [
    {
        name: '2022-06-01',
        value: 50000
    },
    {
        name: '2022-05-01',
        value: 30000
    },
    {
        name: '2022-04-01',
        value: 10000
    },
    {
        name: '2022-03-01',
        value: 5000
    },
    {
        name: '2022-02-01',
        value: 500
    }
];

And this is my code for mapping the data.

this.apiDashboard.api("test").toPromise().then((data: any) => {
            this.multi = [];
            this.single = [];
            data.list.forEach(element => {

                this.multi = data.list.map(datum => ({ name: "Cumulative", series: [{ 
                name: datum.period, value: datum.cumulative }] }));
                this.single = data.list.map(datum => ({
                    name: datum.period, value: datum.amount
                }));
            });
        }

This is the console log for results. The first array is the expected result and the second array is mine data format type. I have to put the period and the value inside of the series[]. How could I deal with this data mapping?

Answer 1

I found a reasonable way.

To map data like this: Create an array, map the data on this array and attend it to our data set.

Code:

   let cumulative = [];

    this.apiDashboard.api("month-transacted").toPromise().then((data: any) => {
        this.dataSource = [];
        this.multi = [];
        this.single = [];
        data.list.forEach(element => {

            this.dataSource.push(element);

            cumulative = data.list.map(datum => ({ name: datum.period, value: datum.cumulative }));
            this.single = data.list.map(datum => ({
                name: datum.period, value: datum.amount
            }));
        });

        this.multi = [
            { name: "Cumulative", series: cumulative }
        ];
    });
}