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

此外，您不应使用Class来保存数据模型，而应使用 interface ，如下面的演示所示。

<强> LIVE DEMO

将JSON解析为Angular 2对象

1 个答案: