How to Append Rate Value into Ion List

Ionic Framework ionic-v3
1

app-service.ts

import { Injectable } from ‘@angular/core’;
import { Http } from ‘@angular/http’;
import ‘rxjs/add/operator/map’;

@Injectable()
export class AppServiceProvider {
baseUrl;

constructor(public http: Http) {
this.http=http;
this.baseUrl = ‘https://liverates.online/urbanpark/rates?filter={“provider”:“AED”}’;
console.log(‘Currency AppServiceProvider Provider’);
}

getPost(){
return this.http.get(this.baseUrl)
.map(res => res.json());
}

}

home.ts

import { AppServiceProvider } from ‘…/…/providers/app-service/app-service’;
import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {

items;

constructor(public appServiceProvider: AppServiceProvider,public navCtrl: NavController) {

}

ngOnInit(){
this.getPost();
}

getPost(){
this.appServiceProvider.getPost().subscribe(response =>{
console.log(JSON.stringify(response));
this.items = response;

})

}

ionViewDidLoad() {
console.log(‘ionViewDidLoad HomePage’);
}

}

home.html

Currency
  • {{items.rates.USD}}
  • {{items.rates.INR}}

    • When im Trying to Parse Json into Html it shows "TypeError: Cannot read property ‘rates’ of undefined"
    I need to get the USD and INR bind to html?

    2

    Could you please format your code in < /> ? This is pretty unreadable.

    First of all, don’t declare type any unless absolutely necessary. Also you’re trying to bind to something that isn’t defined when you start, so please initalize items before you bind them in your view. That’s why property rates pops up undefined.

    How does your items look like in the respond? Are they seperate items or is it just one json object which contain rates?