角2 Typescriptオブジェクトをjsonに構文解析する

Question

私はAngular2とTypescriptの初心者です。私は今、学んでいます。私はRESTサービスからデータを取得しようとしていますが、リストを作成して、このデータをサービスから挿入します。 私のAPIリンクはhttp://jsonplaceholder.typicode.com/users/1

ここは私のHttpTestService.tsコードです。

import {Component} from '@angular/core'; 
import {Http} from '@angular/http'; 
import {Headers} from '@angular/http'; 
import {Observable} from 'rxjs/Observable'; 
import {Injectable} from '@angular/core'; 

import 'rxjs/add/operator/map'; 

@Injectable() 
export class HTTPTestService{ 
    constructor(private _http:Http){} 
    getUser(){ 
     return this._http.get("http://jsonplaceholder.typicode.com/users/1") 
     .map(res=>res.json()); 
    }; 
}} 

ここは私のHttpTestComponent.tsです。

import { Component } from '@angular/core'; 
import {HTTPTestService} from './http-test.service'; 
import { User } from './user'; 

@Component({ 
    selector:'http-test', 
    template:` 
    <button (click)="onGet()">Get Data</button><br/> 
    <div>Output:{{getData}}</div><br/> 
    <button (click) = "onPost()">Post Data</button><br/> 
    <div>Output:{{postData}}</div><br/> 
    <button (click) = "onPromiseGet()">Get Data(w Promise)</button><br/> 
    <div>Output:{{getPromiseData}}</div><br/> 
    `, 
    providers:[HTTPTestService] 
}) 

export class HTTPTestComponent{ 
    getData:string; 
    getPromiseData:string; 
    postData:string; 


    constructor(private _httpService:HTTPTestService){} 

    onGet(){ 
    console.log('Getting user now.'); 
    this._httpService.getUser().subscribe(  
     data =>this.getData = JSON.stringify(data), 
     error=>alert(error), 
    ()=>console.log('Finished Get')  
    );   
    }} 

そして、ここで私は私のUserクラスを埋めるか、その後どのように私は私のUserクラスにジェネリックリストを追加するにはどうすればよい私のUser.ts

export class User{ 
    constructor(public id: number,public name:string) { } 
} 

です。

敬具

Answer 1

限り、私はあなたの質問を理解し、ちょうど新しいObjectUserの種類を作成し、必要なデータを渡し、あなたのケースでは、それはid and nameです。

private userList: Array<User> = new Array<User>(); 

onGet(){ 
    console.log('Getting user now.'); 
    this._httpService.getUser().subscribe(  
     data => this.parseUser(data), 
     error=>alert(error), 
    ()=>console.log('Finished Get')  
    );   
    } 

parseUser(data) { 
    let user = new User(data.id, data.name); 
    this.userList.push(user); 
} 

だけ Userをインポートするために覚えている private Users: Array<User> = new Array<User>();よう Userの配列を作るユーザーのリストを作成します。

EDIT。テスト目的のために 応答が来たとき

@Component({ 
    selector:'http-test', 
    template:` 
    <button (click)="onGet()">Get Data</button><br/> 
    <div>Output:{{getData}}</div><br/> 
    <button (click) = "onPost()">Post Data</button><br/> 
    <div>Output:{{postData}}</div><br/> 
    <button (click) = "onPromiseGet()">Get Data(w Promise)</button><br/> 
    <div>Output:{{getPromiseData}}</div><br/> 

    <div *ngFor="let user of userList"> 
     <p>Id: {{user.id}}</p> 
     <p>Name: {{user.name}}>/p> 
     <br /> 
    </div> 
    `, 
    providers:[HTTPTestService] 
}) 

angularはデータ:)