JSONをAngular 2オブジェクトに解析する

Question

次の問題が発生しています。

オブジェクトのすべての変数を持つ非常に大きなJSON文字列があります。

オブジェクト：

export class User { 
    ssn:string; 
    userId:string; 
    firstName:string; 
    lastName:string; 
    middleName:string; 
    office:string; 
    role:string; 
    lockCode:string; 
    command:string; 
    street:string; 
    city:string; 
    position:string; 
    zip:string; 
    phone:string; 
    dsn:string; 
    fax:string; 
    email:string; 
    pwEffectiveDate:any; 
    pwVaildationDate:any; 
    fromDate:any; 
    toDate:any; 
    systemAccess:string; 
    dmType:string; 
    accessInfoEffectiveDate:any; 
    accessInfoEffectiveTo:any; 
    availableOffices: string[]; 
    availbleRole:string[]; 

} 

JSON：

@Injectable() 
export class SearchService { 

    getData() :any[] { return [ 
     {"snn": "26999935-7", "userId": "EVD404", "firstName": "Chaney", "lastName": "Vernon", "middleName": "X", "office": "ADURT", "role": "GC", "lockCode": "Q", "command": "5th Grp", "street": "953-1348 Faucibus Rd.", "city": "Bienne-lez-Happart", "position": "Developer", "zip": "76222", "phone": "233-969-1834", "dsn": "359-887-4719", "fax": "157-376-6377", "email": "mauris.rhoncus@rhoncusDonec.com", "pwEffectiveDate": "13/03/17", "pwVaildationDate": "27/01/18", "fromDate": "10/11/17", "toDate": "21/12/17", "systemAccess": "GC", "dmType": "XJ", "accessInfoEffectiveDate": "26/12/2016", "accessInfoEffectiveTo": "06/06/2016", "availableOffices": "UUU", "availbleRole": "GC"}, 
     {"snn": "43250813-7", "userId": "NSB626", "firstName": "Addison", "lastName": "Vernon", "middleName": "X", "office": "AUTRO", "role": "GC", "lockCode": "O", "command": "11th ACR", "street": "Ap #904-5416 Semper, Road", "city": "s Herenelderen", "position": "Developer", "zip": "26457", "phone": "890-600-3144", "dsn": "679-122-1054", "fax": "913-500-7495", "email": "Aenean@molestiesodales.com", "pwEffectiveDate": "11/06/17", "pwVaildationDate": "01/03/17", "fromDate": "05/08/17", "toDate": "29/09/16", "systemAccess": "LIMIT", "dmType": "NB", "accessInfoEffectiveDate": "19/04/2017", "accessInfoEffectiveTo": "13/04/2016", "availableOffices": "LLL", "availbleRole": "USER"}, 

その後、私は私がコンポーネントに私のサービスを渡す場合は、以下のようなメソッドを呼び出すことができるようにしたい：

getUserByLastName(lastName):User[]{ 

     let temp: User[]=[]; 

     for(let d of this.data) { 
      if(d.lastName == lastName){ 
       temp.push(d); 
      } 
     } 

     return temp; 

    } 

I JSON.parseしようとしましたが、うまくいきませんでした。私はいくつかのことを試しましたが、どれも固執していないようです。

---------------------------------更新1 ----------- -----------------

Observableを使用している必要があります。ここで私はそれを実装しようとしているが、それが現在動作していないで持っているものです。

getUserBySSN():Observable<User[]> { 
     return this._http.get(this._url) 
      .map((response: Response) => 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'); 
    } 

私はJSONファイルを作成し、そのパスとして変数urlを設定します。しかし、私は次のエラーを取得しています：それが示唆された

The type argument for type parameter 'T' cannot be inferred from the 
usage. Consider specifying the type arguments explicitly. Type 
argument candidate 'Response' is not a valid type argument because it 
is not a supertype of candidate 'Response'. Types of property 'type' 
are incompatible. Type 'string' is not assignable to type 'ResponseType' 

私は.map((response: Response) => <User[]> response.json())を使用するが、私はそれを変換することができませんでした。

私はこれが最善のアプローチであることを発見したので、後で私はそれを使ってDBに対して実際のHTTPコールを行うことができます。

あなたのサービスが提起すべき

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

以下のようにあなたのコンポーネントがサービス値に加入する必要があります

以下のようにあなたは、あなたの条件を達成するためにrxjsを使用する必要がありますAngular2の世界では

Answer 1

、 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'); 
    } 
} 

また、クラスを使用してデータを保持することはできませんモデルではなく、インターフェイスを以下のデモに示すように使用してください。

LIVE DEMO