Angular2에서 JSON에 액세스

Question

Angular2에서 JSON 객체의 다양한 측면에 액세스하는 방법을 이해하는 데 어려움을 겪고 있습니다. 특히, 나는 내 서버의 하드 드라이브 정보에 대한 다음과 같은 JSON 객체를 반환 내장 웹 API가 : 사용 후

이미지가 크롬 내 콘솔의 스크린 샷입니다 이상 HTTPService 및 관찰 가능한 그것을 콘솔로 밀어 넣을 수 있지만 특정 정보를 얻는 방법을 이해하는 것은 나에게 길을 잃어 가고 있습니다.

누군가가 올바른 방향으로 나를 가리킬 수 있으면 크게 감사하겠습니다.

Answer 1

http Observable을 구독하면 이미 실제 개체를 얻었습니다. 는 HTTP 요청을 얻을 가정하면 다음과 같습니다

this.httpService.get(this.apiUrl);

이 같은 개체 위에 예를 들어, 맵, rxjs의 Observable 인의 힘을 사용할 수 있습니다

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

행운을 시험해 보도록하겠습니다. 사람들이 더 잘 이해하는 데 도움이되기를 바랍니다. 특히 내가 는 가 및 게시 service.ts 공식 documentaton에서 언급 한 바와 같이라는 seprate 파일에 요청을 얻을 수있는 항상 더 나은 각도 2의 요청을받을 수행하는 방법에 대해 이야기합니다.

우리는, 즉 세 개의 파일, 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.

<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> 

HTML는 마지막이 내 JSON 파일

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

마십시오 찬성 투표의 사람 당신이 유용 할 경우의 모델입니다.