Hey Ionic community,
I’m trying to create a very simple app with Ionic that uses a JSON API. The idea is to save the API base url in the SQLite storage.
My code looks like this:
game-service.ts:
import {Injectable} from 'angular2/core';
import {Http, Headers} from 'angular2/http';
import {Game} from "../interfaces/game";
import {SqlStorage, Storage} from 'ionic-angular';
@Injectable()
export class GameService {
private _storage: Storage;
serverURL: String;
constructor(private http: Http) {
this._storage = new Storage(SqlStorage);
this._storage.get("serverURL").then(
data => this.serverURL = data
);
}
getGames() {
let games = this.http.get(this.serverURL + "/api.php?request=list");
return games;
}
getDetails(game: Game){
let id = game.id;
console.log("getDetails mit " + this.serverURL);
let detail = this.http.get(this.serverURL + '/api.php?request=detail&id=' + id);
return detail;
}
}
details.html:
<ion-navbar *navbar>
<ion-title>
{{ game.gameName }}
</ion-title>
</ion-navbar>
<ion-content>
<ion-list>
<ion-item>
Seller country
<div item-right>{{gameDetails?.sellerCountry}}</div>
</ion-item>
</ion-list>
<button block (click)="test()" outline default>Test</button>
</ion-content>
details.ts:
import {Page,NavController, NavParams} from 'ionic-angular';
import {OnInit} from 'angular2/core';
import {GameService} from "../../../services/game-service";
import {Game} from "../../../interfaces/game";
import {GameDetails} from "../../../interfaces/game-details";
@Page({
templateUrl: 'build/pages/details/details.html',
providers: [GameService]
})
export class DetailsPage implements OnInit{
private game: Game;
public gameDetails: GameDetails;
constructor (private _gameservice: GameService, private _nav: NavController, private _navParams: NavParams){
this.game = _navParams.get('game');
}
ngOnInit(){
console.log(this._gameservice.serverURL);
this._gameservice.getDetails(this.game).subscribe(
data => this.gameDetails = data.json(),
err => console.error(err),
() => console.log('getDetails completed')
);
}
test(){
console.log(this._gameservice.serverURL);
}
}
My problem:
When I navigate to the “Details” page of my app it’s not able to get data from the API and I get a Failed to load resource: the server responded with a status of 404 (Not Found)
error message but when I press the “Test” button the correct server URL is printed in the console.
I assume that there is some kind of timing problem (maybe the page loads faster than the SQLite storage).
How can I fix my problem and use the URL from the SQLite storage for my API call?
Thanks in advance for the help