I'm getting a JSON file from an api,
as you can see there is an Object inside an Object called "rates" unfortantly *ngFor can walk through on array only. I am looking for something that I can get the "Key" and "Value" like
for(var var in obj)
for example get access to "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 rate object should be in the lastest "ion-item"
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;
});
}
}
thx you guys :)
*ngFor is not meant to be used against objects but you can work around this by using Object.keys, Try this maybe
<div *ngFor='let key of Object.keys(yourObject)'>
<h3>{{yourObject[key].someProperty}}</h3>
</div>
You can use a method on your component that extracts the keys or a reusable pipe
@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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With