Ionic 4 unable to display data inside ngFor - ionic4

Question

I am trying to fetch payment methods from razorpay payment gateway. But unable to display it. The problem is there is no data available at the time of display. How do I wait for data to load?
Thank you in advance
.ts
banks : [];
constructor() {
this.razorpay = new Razorpay({
key : 'XXXXXXXXXXX',
key_secret: 'XXXXXXXX'
})
this.razorpay.once('ready', function(response) {
this.banks = response.methods.netbanking
console.log(this.banks)
this.display = true
})
}
html
<ul *ngIf="display">
<li *ngFor="let hero of banks | async">
{{ hero }}
</li>
</ul>

Answer 1

As your result console.log(this.banks) is in key value pair.
Your keys are AUBL,ABPB,AIRP,ALLA
You can bind data like this
<ul *ngIf="display">
<li *ngFor="let hero of banks | async">
{{ hero.AUBL }}
{{hero.ABPB}}
//so on
</li>
</ul>

Answer 2

It seems like the API returns Object rather that an Iterable such as Array.
if you need to display each property of such object you would have to transform the object to an array:
constructor() {
this.banks = [];
this.razorpay = new Razorpay({
key : 'XXXXXXXXXXX',
key_secret: 'XXXXXXXX'
})
this.razorpay.once('ready', (response) => {
let methodsObj = response.methods.netbanking
this.banks = Object.entries(methodsObj)
console.log(this.banks)
})
}
Then your template is:
<ul>
<li *ngFor="let hero of banks">
{{ hero[0] }}, {{ hero[1] }}
</li>
</ul>

Answer 3

With the KeyValuePipe you will be able to iterate over the properties of the object. Remove the async pipe, as you're not working with an observable.
<ul *ngIf="display">
<li *ngFor="let hero of banks | keyvalue">
{{ hero.key }}: {{ hero.value }}
</li>
</ul>
And initialize the banks object correctly as an object instead of an array.
banks = {};
This will give a result like
AUBL: AU Small Finance Bank
ABPB: Aditya Birla Idea Payments Bank
...

Answer 4

this.razorpay.once('ready', (response) => {
this.banks = response.methods.netbanking
console.log(this.banks)
this.display= true
console.log(this.display)
})
I have to use arrow (response) => as a callback. By using function() you can't bind object data