* ngFor for an angular2 object

Question

I get the JSON file from the api,

as you can see, there is an object inside the object called "bets", it’s inconvenient * ngFor can only go through an array. I am looking for something that I can get "Key" and "Value" as

for(var var in obj) 

for example, access "AUD: 0.41852"

 { "base":"BRL",s "date":"2016-10-27", "rates":{ "AUD":0.41852, "BGN":0.57085, "CAD":0.42629, "CHF":0.31634, "CNY":2.1623, "CZK":7.8871, "DKK":2.1709, "GBP":0.26023, "HKD":2.4734, "HRK":2.1894, "HUF":90.257, "IDR":4156.5, "ILS":1.2256, "INR":21.311, "JPY":33.388, "KRW":364.6, "MXN":5.9721, "MYR":1.3381, "NOK":2.6227, "NZD":0.44646, "PHP":15.465, "PLN":1.2636, "RON":1.3146, "RUB":20.025, "SEK":2.8648, "SGD":0.44397, "THB":11.191, "TRY":0.98786, "USD":0.31893, "ZAR":4.4196, "EUR":0.29188 } 

}

here is my code, the speed object should be in the last "ionic element"

currency.html

 <ion-header style="direction:rtl;"> <ion-navbar> <ion-title> המרת מטבע </ion-title> </ion-navbar> </ion-header> <ion-content padding style="direction:rtl;"> <ion-list> <ion-item> <ion-label>בחר מטבע:</ion-label> <ion-select okText="אשר" cancelText="בטל" [(ngModel)]="selectCurrencyInput"> <ion-option value="BGN">BGN</ion-option> <ion-option value="BRL">BRL</ion-option> <ion-option value="CAD">CAD</ion-option> <ion-option value="CHF">CHF</ion-option> <ion-option value="CNY">CNY</ion-option> <ion-option value="CZK">CZK</ion-option> <ion-option value="DKK">DKK</ion-option> <ion-option value="GBP">GBP</ion-option> <ion-option value="HKD">HKD</ion-option> <ion-option value="HRK">HRK</ion-option> <ion-option value="HUF">HUF</ion-option> <ion-option value="IDR">IDR</ion-option> <ion-option value="ILS">ILS</ion-option> <ion-option value="INR">INR</ion-option> <ion-option value="JPY">JPY</ion-option> <ion-option value="KRW">KRW</ion-option> <ion-option value="MXN">MXN</ion-option> <ion-option value="MYR">MYR</ion-option> <ion-option value="NOK">NOK</ion-option> <ion-option value="NZD">NZD</ion-option> <ion-option value="PHP">PHP</ion-option> <ion-option value="ZAR">ZAR</ion-option> <ion-option value="PLN">PLN</ion-option> <ion-option value="RON">RON</ion-option> <ion-option value="RUB">RUB</ion-option> <ion-option value="SEK">SEK</ion-option> <ion-option value="SGD">SGD</ion-option> <ion-option value="THB">THB</ion-option> <ion-option value="TRY">TRY</ion-option> <ion-option value="USD">USD</ion-option> </ion-select> </ion-item> <ion-item> <ion-label>כמות לחישוב</ion-label> <ion-input #amountCurrencyInput type="text"></ion-input> </ion-item> <button ion-button (click)="calc({selectedCurrency:selectCurrencyInput,amountCurrency:amountCurrencyInput.value})"> חשב מטבע </button> </ion-list> <ion-list *ngIf="load" inset> <h2>שער המטח נכון להיום: <span>{{results.date}}</span></h2> <h3>המטבע הנבחר: {{results.base}}</h3> <ion-item> <!-- Object should run here.--> </ion-item> </ion-list> </ion-content> 

currency.ts

 import {Component} from '@angular/core'; import {NetworkServices} from '../../services/network'; @Component({ selector: 'currency-page', templateUrl: 'currency.html', providers: [NetworkServices] }) export class CurrencyPage { public load: any; public results: any; constructor(public networkServices: NetworkServices) { this.load = false; } calc(details) { this.networkServices.getCurrency(details).then((result) => { this.load = true; this.results = result; }); } } 

thank you guys :)

Answer 1

* ngFor is not intended for use with objects, but you can get around this with Object.keys, try this maybe

 <div *ngFor='let key of Object.keys(yourObject)'> <h3>{{yourObject[key].someProperty}}</h3> </div> 

Answer 2

You can use a method on your component that retrieves keys or a reused channel

 @Pipe({name: 'keys'}) export class KeysPipe implements PipeTransform { transform(value) : any { if(!value) { return null; } return Object.keys(value); } } 

 <div *ngFor="let key of someObject | keys">{{someObject[key]}}</div> 

Answer 3

 ngFor= "let x of results?.rates" 

should work too.