web-dev-qa-db-ja.com

JSONをIonic 2とtypescriptで解析します

Randomuser.me apiからいくつかのJSONデータを解析しようとしています。これを行うには、オンラインでいくつかのチュートリアルが見つかりましたが、最近Ionic 2で何かが変更されています。いずれも機能していないため、.

これが私が持っているものです：

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {Http} from '@angular/http';


@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  items : any;
  //http://api.randomuser.me/?results=10

  constructor(private navController: NavController, private http: Http) {

    this.http.get("http://api.randomuser.me/?results=10").subscribe(data => {
        console.log("Got data");
        this.items=JSON.parse(data._body).results; // this is the error
        console.log(this.items);
    });
  }

  itemClicked(event, item) {
    console.log(item.title);
    //console.log(event);
  }


}

ターミナルでエラーが表示されます：data._body-プロパティ '_body'はプライベートであり、クラス 'Response'内でのみアクセス可能です。

私に何ができる？

typescriptangularionic2
5
André Oliveira

data.text（）のdata._body、

data.text()の代わりにそれを解析するには、data.json()を使用する必要があります

this.items = data.json();

https://angular.io/docs/ts/latest/guide/server-communication.html#!#extract-data

6
basarat

新しいバージョンで変更されましたこれを試してください

this.items= JSON.parse(data['_body']).results;

4
Adem Ergun

Ionic 2が少し変わったので、私はそれを行う方法を共有したいと思いました。

マップ関数にアクセスするには、インポートステートメントの下にこの行を追加する必要があります

import 'rxjs/add/operator/map';

次に、コンストラクターを...に変更します。

        this.http.get("http://api.randomuser.me/?results=10").map(res => res.json()).subscribe(data => {
        console.log("Got data");
        console.log(this.data);
    });
}

これで、コンソールにJSON文字列が表示されます。
追加したビットは。map（res => res.json（）のみであることに注意してください

APIからデータを取得するのに苦労している場合はチェックする必要があるIonic 2つのビデオをたくさんやっている男ジョシュアモロニーがいます： https://www.youtube .com/watch？v = vuc4dp0qHSc＆index = 33＆list = PLvLBrJpVwC7ocO1r-xu218C15iE9gTWBA

1
rawturtle