Ionic2 并获取 Json答案

【问题标题】：Ionic2 and get JsonIonic2 并获取 Json
【发布时间】：2017-04-11 01:25:13
【问题描述】：

我正在尝试使用 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);    
});

}

我还有一个 PrintJson() 方法，它只是打印 json 用于测试目的。我得到了错误：

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

我不明白为什么。而且我找不到简单且最新的教程。还是应该使用 fetch()？

【问题讨论】：

您能否访问带有 200 状态码的 Ionic2 应用程序之外的 URL？
在 angular2 应用程序中...我复制粘贴代码并更改我需要的内容。（我发现了你的博客！感谢你的文章）。路径是对的。
你也试过'app/Ressources/Items.json'吗？

标签： json angular ionic2

【解决方案1】：

首先将你的json复制到以下目录（你可以创建文件夹“data”）：

[appname]/www/data/data.json

在控制台中输入以下命令：

ionic g provider JsonData

它应该为您创建一个提供程序。转到该页面并在load()函数中输入以下内容：

  load() {
      if (this.data) {
          // already loaded data
          return Promise.resolve(this.data);
      }

      // don't have the data yet
      return new Promise(resolve => {
          // We're using Angular Http provider to request the data,
          // then on the response it'll map the JSON data to a parsed JS object.
          // Next we process the data and resolve the promise with the new data.
          this.http.get('data/data.json').subscribe(res => {
              // we've got back the raw data, now generate the core schedule data
              // and save the data for later reference
              this.data = res.json();
              resolve(this.data);
              console.log(this.data);
          });
      });
  }

【讨论】：

【解决方案2】：

我通常像这样围绕 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]];
    }
}

【讨论】：

谢谢。然后 myResult 是完整的 json？我今晚试试。
是的。今晚试一试后，请告诉它是否有效
哼。同样的错误。我必须导入任何东西吗？ hostingpics.net/…
我不确定您为什么会出错。您可以尝试用这个替换示例中第 3 行的 Observable 导入：import {Observable} from "rxjs/Observable";
您也可以尝试将其放在导出类 Page1Service 的正下方：static get parameters(){ return [[Http]]; }

【解决方案3】：

只需尝试在 GetItems() 方法中获取 response.json() 而不是 response.json().data

【讨论】：

谢谢。这只是我的json的结构。

【解决方案4】：

问题是由于本地浏览器（计算机）和设备（android）中 json 文件的路径不同。在src\assets 文件夹内创建data 文件夹。将您的 json 文件移入其中。

当我们运行ionic serve 时，它会将该文件夹（带有文件）移动到www\assets 文件夹中。然后做以下事情：

导入Platformionic2的服务

 import { Platform } from 'ionic-angular';

注入Platform服务。

  constructor(private http: Http, private 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()
        });
}

【讨论】：