Timing problems with SQLite storage

@lx4r wrote:

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

Posts: 2

Participants: 2

Read full topic