복붙노트

[ANGULAR] JSON을 Angular 2 객체로 파싱합니다

ANGULAR

JSON을 Angular 2 객체로 파싱합니다

해결법


  1. 1.Angular2의 세계에서는 다음과 같이 귀하의 요구 사항을 달성하기 위해 RXJ를 사용해야합니다.

    Angular2의 세계에서는 다음과 같이 귀하의 요구 사항을 달성하기 위해 RXJ를 사용해야합니다.

    구성 요소는 아래와 같이 서비스 값을 구독해야합니다.

    this.userService.getUsers()
                  .filter(users =>{
                    for(let user of users) {
                        if(user.lastName == 'Vernon'){
                    this.users.push(user);
                   }}})
                  .subscribe(users => this.users = users,
                  error =>this.errorMessage =<any> error);
    

    귀하의 서비스는 HTTP 호출을 높이고 아래와 같이 데이터를 반환해야합니다.

    import { Injectable } from '@angular/core';
    import { Http, Response } from '@angular/http';
    import { Observable } from 'rxjs/Observable';
    import {User} from './user.model.ts';
    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/catch';
    import 'rxjs/add/operator/do';
    import 'rxjs/add/operator/filter';
    @Injectable()
    export class UserService {
        private _url = "src/data.json";
        constructor(private _http: Http) {
        }
        getUsers(): Observable<User[]> {
            return this._http.get(this._url)
                .map((response: Response) => <User[]>response.json())
    
                .do(data => console.log("User data" + JSON.stringify(data)))
                .catch(this.handleError);
        }
    
        private handleError(error: Response) {
                console.log(error);
                return Observable.throw(error.json().error || 'Internal Server error');
        }
    }
    

    또한 데이터 모델을 보유하기 위해 클래스를 사용해서는 안됩니다. 대신 아래 데모와 같이 인터페이스를 사용하십시오.

    라이브 데모

  2. from https://stackoverflow.com/questions/42655795/parsing-json-into-a-angular-2-object by cc-by-sa and MIT license