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

    } 

我已嘗試JSON.parse，但沒有奏效。我嘗試了其他一些東西，但沒有一個似乎堅持。

--------------------------------- Update 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())但我不會允許將其轉換。

經過進一步的研究，我發現這是最好的方法，並試圖讓它起作用，所以稍後我可以使用它來對數據庫進行實際的HTTP調用。

Answer 1

在Angular2的世界裏，你應該用rxjs達到您的要求，如下圖所示

你的組件應該訂閱服務值如下

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

此外，你不應該使用類持有你的dat一個模型，而不是使用接口，如下面的演示所示。

LIVE DEMO