Ionic2 と Json を取得します。



ionic platform (3)

私はIonic2を使用しようとしており、ローカルストアドJsonをフェッチするサービスを作った。

import {Injectable} from 'angular2/core';
import {Http, Response} from 'angular2/http';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';

@Injectable()
export class Page1Service {   

public constructor(private _http: Http) {}

public GetItems() {
    return this._http.get('/app/Ressources/Items.json').map((response:   Response) => response.json().data); 

}

public PrintJson():boolean {
   var myresult;
   this.GetItems().subscribe((result) => {
   myresult = result;
   console.log(result);    
});

}

私はまた、テスト目的のjsonを印刷するPrintJson()メソッドを作成しました。エラーが発生しました:

GET http://localhost:8100/app/Ressources/slides.json 404 (Not Found)

私は理由を知りません。 そして、私は簡単で簡単なチュートリアルを見つけることができません。 または、fetch()を使うべきですか?

https://ffff65535.com


GetItems()メソッドのresponse.json()。dataではなくresponse.json()を取得してみてください


私は通常、次のようにapi-callの周りを囲むObservableを作成します。

public GetItems() {
 return Observable.create(observer => {
    this._http.get('/app/Ressources/Items.json').map(res =>res.json()).subscribe(data=>{
        observer.next(data)
        observer.complete();
    });
 });
}

次に、そのメソッドを購読して結果を取得し、それを使って何かを行う必要があります。 (結果をGUIのリストに委譲することができます)

GetItems().subscribe(data=>{
    myResult = data;
});

編集:これは、クラスにも配置するのに役立つかもしれません

export class MyClass{
    static get parameters(){
        return [[Http]];
    }
}

この問題は、ローカルブラウザ(コンピュータ)とデバイス(アンドロイド)のjsonファイルのパスが異なるためです。 src\assetsフォルダ内にデータフォルダを作成します。 あなたのjsonファイルをその中に移動してください。

ionic serveを実行ionic serve 、そのフォルダ(ファイルあり)をwww\assetsフォルダに移動します。 次に、以下のことを行います:

  1. ionic2インポートPlatformサービス

     import { Platform } from 'ionic-angular';


  1. Platformサービスを注入する。

      constructor(private http: Http, private platform: Platform ) { }


  1. Platformサービスを使用しPlatform

    public getItems() {
    
        var url = 'assets/data/Items.json'; 
    
        if (this.platform.is('cordova') && this.platform.is('android')) {
            url = "/android_asset/www/" + url;
        }
    
        return this.http.get(url)
            .map((res) => {
                return res.json()
            });
    }






ionic2