Search code examples
jsonangularngfor

How to Add Comma seperated Object types into NgFor loop?


I want to bind the currency codes and Values seperatly

"rates": {
        "USD": 1,
        "AED": 3.672057,
        "ARS": 56.01249,
        "AUD": 1.46368,
        "BGN": 1.77167,
        "BRL": 4.087588,
        "BSD": 1,
        "CAD": 1.320503,
        "CHF": 0.987394,
        "CLP": 716.341326,
        "CNY": 7.13045,
        "COP": 3416.761905,
        "CZK": 23.407844,
        "DKK": 6.757576,
        "DOP": 51.214847,
        "EGP": 16.42298,
        "EUR": 0.906246,
        "FJD": 2.190098,
        "GBP": 0.812305,
        "GTQ": 7.682227,
        "HKD": 7.838661,
        "HRK": 6.706097,
        "HUF": 298.791592,
        "IDR": 14146.297846,
        "ILS": 3.517842,
        "INR": 71.751368,
        "ISK": 126.170061,
        "JPY": 106.936393,
        "KRW": 1194.541725,
        "KZT": 387.848649,
        "MXN": 19.613284,
        "MYR": 4.184189,
        "NOK": 8.99096,
        "NZD": 1.561619,
        "PAB": 1,
        "PEN": 3.352305,
        "PHP": 51.899054,
        "PKR": 156.32244,
        "PLN": 3.930302,
        "PYG": 6522.909091,
        "RON": 4.285713,
        "RUB": 65.941596,
        "SAR": 3.75059,
        "SEK": 9.657741,
        "SGD": 1.382595,
        "THB": 30.646268,
        "TRY": 5.701489,
        "TWD": 31.23947,
        "UAH": 24.982101,
        "UYU": 36.570846,
        "VND": 23112.280702,
        "ZAR": 14.803694
    }

this is on my view :

 <a class="dropdown-item w-r" *ngFor="let cur of currencies?.rates" (click)="onCurrency(cur)" >{{cur}}</a>

error :

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.


Solution

  • you can try to use keyvalue pipe:

    <a class="dropdown-item w-r" *ngFor="let cur of currencies?.rates | keyvalue" (click)="onCurrency(cur)" ><br>{{cur.key}}:{{cur.value}}</a> 
    

    StackBlitz demo