Ionic2 angular2 http 从外部 api 获取 json

Question

我知道这可能是一个菜鸟问题，因为我见过更复杂的东西，但要理解复杂的东西，我需要先理解简单的东西。

我正在尝试从 api (laravel) 的 JSON 字符串中获取名称：

{"name":"Abigail","state":"CA"}

代码是用返回这个的路由创建的（在 laravel 中）：

return response()->json([
    'name' => 'Abigail',
    'state' => 'CA'
]);

在 ionic 中我得到了这些文件：

page.ts:

export class Page {
  constructor(public http: Http) {}
    getJson() {
      this.http.get('http://external.ip/api')
          .map(res => res.json())
          .subscribe(
          data => this.data = data
      );
    }
}

page.html:

<ion-header>
  <ion-navbar>
    <ion-title>App</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-content>
    <ion-list>
      <ion-item>
        <h3>{{data.name}}<h3>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-content>

我知道这不起作用，但我需要帮助才能使其正常工作。 我希望以后能够添加更多名称。 之后我希望能够将数据发布到 api（例如添加名称或更改日期）。

Answer 1

假设某些东西运行 getJson()，这应该可以工作（我添加了 OnInit 代码来做到这一点）。也为您提供了一个简单的发布请求的快速示例。您可以订阅该帖子或保持原样。

//Will need on OnInit to run getJson()
    import {Component, OnInit} from '@angular/core';


 export class Page implements OnInit {

  constructor(public http: Http) {}

data: any;

    getJson() {
      this.http.get('http://external.ip/api')
          .map(res => res.json())
          .subscribe(
          data => this.data = data;
      );
    }
//run getJson() at initial load
ngOnInit() {
 this.getJson();
}
     postJson(data:any) {
    let headers = new Headers({ 'Content-Type': 'application/json'});
    let options = new RequestOptions({ headers: headers });
    return this.http.post('http://52.11.14.57:4000/api/events', JSON.stringify(data), options)
      .map((res: Response) => res.json());
  }
        }
    }