I'm studying Ionic and I've started working with some APIs and now I'm having some trouble using the CountryAPI ( https://fabian7593.github.io/CountryAPI/ ). I'm using the GET method to receive a json with informations of all the countries that have "united" in their names. Here's my code:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import firebase from 'firebase'
import { HTTP } from '@ionic-native/http'
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public resultados: any
constructor(public navCtrl: NavController, public http: HTTP) {
this.mget()
}
sair(){
firebase.auth().signOut().then(() => this.navCtrl.setRoot('login'))
}
mget(){
let url = 'http://countryapi.gear.host/v1/Country/getCountries?pName=united'
this.http.get(url, {}, {}).then( data => {
console.log(data.data); // data received by server
let results = JSON.parse(data['_body']).results
})
}
}
when I console.log the data received it's all ok and beautiful in a json format, but it's not possible to subscribe for the ionic-native http.get method and if I try something like
for(let i = 0; i < news.length(); i ++){
console.log(news[i])
this.noticias.push({
name: news[i].name,
nativeName: news[i].nativeName
})
}
is no good, it accuses that news.length() is not a function.
I need to fetch all the data in a vector so I can display it in a list with ion-list in my app.
To Fetch the JSON data from country API you should add the provider like this:
ionic g provider countryService
and then hit the API like the below code in countryService.ts
// ******************************** listing API ***********************************
load() {
console.log(' RestServiceProvider Load Method fro listing');
if (this.data) {
return Promise.resolve(this.data);
}
// don't have the data yet
return new Promise(resolve => {
this.http.get("http://countryapi.gear.host/v1/Country/getCountries?pName=united")
.map(res => res.json().response)
.subscribe(data => {
this.data = data;
resolve(this.data);
});
});
}
For getting the name of the country you should call this method in your HomePage like this:
this.countryService.load().then(data => {
this.country= data;
});
show name in UI by using html of HomePage class :
<ion-list>
<ion-item *ngFor="let countrylist of country">
<h2 style="color: tomato">User Id: {{countrylist.name}}</h2>
<h4>{{countrylist.nativeName}}</h4>
</ion-item>
</ion-list>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.