How to dynamically populate an array in Typescript for ngx chart?

Question

I am using ngx chart library to display a barchart. It works fine when I use a static array but when I try to populate it dynamically, it does not work.

Below are my codes:

Note: allProducts is an array returned from API with a list of itemName, AmountPaid, Date purchased, etc. I only need the array below with itemname and amountpaid to populate a bar chart using ngxChart.

When I use this static array, everything works fine:

        this.products = [{
            "name": this.allProducts[0].itemName,
            "value": this.allProducts[0].AmountPaid
        },
            {
                "name": this.allProducts[1].itemName,
                "value": this.allProducts[1].AmountPaid
            }
            ,
            {
                "name": this.allProducts[2].itemName,
                "value": this.allProducts[2].AmountPaid
            }
            ,
            {
                "name": this.allProducts[3].itemName,
                "value": this.allProducts[3].AmountPaid
            }
            ,
            {
                "name": this.allProducts[4].itemName,
                "value": this.allProducts[4].AmountPaid
            }
            ,
            {
                "name": this.allProducts[5].itemName,
                "value": this.allProducts[5].AmountPaid
            }
        ];

When I try to create it dynamically as below - it does not return the array in the correct format:

        this.allProducts.forEach((item) => {
            this.productData.push({
                "name": item.itemName,
                "value": item.grossAmountPaid
            });
        })

The console.log for the static array returns the below - correct format:

(6) [{…}, {…}, {…}, {…}, {…}, {…}]
0: {name: "Car-SL-Monthly", value: 1000000}
1: {name: "Car-SL-Yearly", value: 1000000}
2: {name: "Car-RB-Monthly", value: 5000}
3: {name: "dsaf", value: 455}
4: {name: "Delivery Van", value: 500000}
5: {name: "Lorry", value: 1000000}
length: 6
__proto__: Array(0)

The dynamic array returns the below - Incorrect Format:

Array(6)
0: {name: "Car-SL-Monthly", value: 1000000}
1: {name: "Car-SL-Yearly", value: 1000000}
2: {name: "Car-RB-Monthly", value: 5000}
3: {name: "dsaf", value: 455}
4: {name: "Delivery Van", value: 500000}
5: {name: "Lorry", value: 1000000}
length: 6
__proto__: Array(0)

What is wrong with my foreach loop and how can I get my dynamic array (using foreach) to be in the same format as the static array?

What do you mean by correct/incorrect format? Both outputs are identical in their data. — Kaustubh Badrike
– Kaustubh Badrike, Commented Jun 16, 2020 at 8:24
@KaustubhBadrike I agree, but look at the first line - it seems to have a different header. — avdeveloper
– avdeveloper, Commented Jun 16, 2020 at 11:10
Maybe you should stop relying on the format of your console logs — Kaustubh Badrike
– Kaustubh Badrike, Commented Jun 17, 2020 at 7:54

Dewanshu · Accepted Answer · 2020-06-16 06:58:00Z

1

in your type script file------


    charDataLoading: boolean ; // define a variable

    constructor(){
    this.chartDataLoading = true; // set variable value false 
    }
     ngOnInit(){
               this._createChartData();
    }
     private _createChartData(){
     this.allProducts.forEach((item) => {
                this.productData.push({
                    "name": item.itemName,
                    "value": item.grossAmountPaid
                });
            })
    this.chartDataLoading = false;
    }

Use chartDataLoading as condition variable in your html file

<div *ngIf="!chartDataLoading">
//put your chart canvas inside this div 
</div>

Hope this will help

answered Jun 16, 2020 at 6:58

Dewanshu

5343 silver badges19 bronze badges

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

Comments

K1laba · Accepted Answer · 2020-06-17 14:27:21Z

0

In static version you are using

this.products

and in dynamic version you have

this.productData

Also maybe array push method not triggering change detection. try something like this and let us know.

this.productData = this.allProducts.map((item) => ({
            "name": item.itemName,
            "value": item.grossAmountPaid
        }));

answered Jun 17, 2020 at 14:27

K1laba

1542 silver badges5 bronze badges

Collectives™ on Stack Overflow

How to dynamically populate an array in Typescript for ngx chart?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related