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フォルダに移動します。次に、以下のことを行います：

ionic2インポートPlatformサービス

 import { Platform } from 'ionic-angular';

Platformサービスを注入する。

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

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()
        });
}