訪問JSON在Angular2

Question

我有一個艱難的時間瞭解如何訪問Angular2一個JSON對象的不同方面。特別是，我有一個Web API，我建立了返回關於我的服務器上的硬盤驅動器的詳細信息如下JSON對象：使用後

的形象是我在Chrome控制檯的屏幕截圖中的HTTPService和可觀測把它推到控制檯上，但瞭解如何獲得特定的信息會讓我迷失方向。

如果有人能在正確的方向指向我，將不勝感激。

Answer 1

已訂閱的HTTP後可觀察到你已經得到了實際的對象。 假設你的HTTP GET請求如下：

this.httpService.get(this.apiUrl);

可以使用rxjs觀測量的能力，例如地圖上的對象是這樣的：

this.httpService.get(this.apiUrl) .map(res => res.json()) .map(body => body.Data) .map(data => data[0].AvailableSpace)

這之後subscribing到將返回AvailableSpace。

.subscribe(availablespace => console.log(availablespace);

當心訪問這樣的陣列，這只是給你如何在觀測訪問和操作對象的例子。

查看本網站了解有關不同可觀測 運營商，除map以外的更多信息。 https://www.learnrxjs.io/

Answer 2

讓我試試我的運氣。希望它能幫助人們更好地理解。特別是我將談論如何執行獲得角2要求它始終是最好有一個得到和後在一個名爲service.ts作爲官方documentaton提到一個seprate文件請求。

我們將有三個文件，分別example.component.ts，example.service.ts和型號文件examplemodel.ts

example.component.ts

import {OnInit, Component} from "@angular/core"; 
import {ExampleService} from "./example.service"; // import service 
import {ResponseFromGet, ErrorMessage} from "./examplemodel"; // import your model 
@Component({ 
    providers: [ExampleService], // add your service here in order to use in component file 
    templateUrl: './example.template.html' 
}) 
export class ExampleComponent implements OnInit{ 
//Specify Url for Get request 
Private _getRequestUrl = "http://entergetrequesturlhere"; 

// Make variable for stroing get method reponse which can be used in ur template file 
responseFromGetMethod: ResponseFromGet; // this can be ur model file which represnts ur JSON model 

// For storing Error 
    errorMessage: ErrorMessage; 

//use Constructor to inject your service in component file 
constructor(private _exampleService: ExampleService){} 

// Since we implemented OnInit we need to override its method ngOnInit 
// this method is called when page is loaded 
    ngOnInit(): any{ 
    this.callGetMethod(this._getRequestUrl); 
    } 

// callGetMethod outside OnInit but inside class ExampleComponent 
    callGetMethod(getUrl: string){ 
    this._exampleService.getMethodName(getUrl) 
     .subscribe(
     responseFromGetMethod => { 
      this.responseFromGetMethod = responseFromGetMethod; // Store response from getmethod in your local variable 
     }, 
     error => this.errorMessage = <any>error // Store error message receiver from server 
     ); 
    } 
} 

example.service.ts

import {Http, Response} from "@angular/http"; 
import {Injectable} from "@angular/core"; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/operator/catch'; 
import {ResponseFromGet} from "./examplemodel"; 
@Injectable() 
export class ExampleService{ 
    constructor(private _http: Http) { } 

    // GET request To access data and specify observable type from model 
    getMethodName(getUrl): Observable<ResponseFromGet>{ 
    return this._http.get(getUrl) 
    .map(this.extractData) // to check for the status code 
    .catch(this.handleError); // to check error 
    } 

    // Extracts from response 
    private extractData(res: Response) { 
    if (res.status < 200 || res.status >= 300) { 
     throw new Error('Bad response status: ' + res.status); 
    } 
    let response = res.json(); 
    return response || {}; 
    } 

    // To handle Error 
    private handleError(error: Response) { 
    console.error(error); 
    return Observable.throw(error.json() || 'Server error'); 
    } 
} 

examplemodel.ts

export interface ResponseFromGet{ 
    id: number; 
    name: string; 
} 
export interface ErrorMessage{ 
    message: string; 
} 

最後的HTML文件 example.template。HTML

<div> 
    <h2>{{responseFromGetMethod?.name}}</h2> // this will print the name from the json file 
    <h3>{{errorMessage?.message}}</h3> // this will print the error if any 
</div> 

最後這是我JSON文件

{ 
    "id": 789; 
    "name": "Angular2"; 
} 

，如果你發現它管用嗎給予好評傢伙的模型。