将JSON解析为Angular 2对象 [英] parsing JSON into a Angular 2 object

问题描述

我遇到以下问题.

我有一个非常大的JSON字符串，其中包含对象中的所有变量.

I have a very large JSON string that has all the variables from the object.

对象:

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": "[e-mail]", "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": "[e-mail]", "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"},

然后，当我将服务传递给组件时，我希望能够调用如下方法:

Then I want to be able to call methods like below when I pass my service into the component:

getUserByLastName(lastName):User[]{

        let temp: User[]=[];

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

        return temp;

    }

我尝试了JSON.parse，但是没有用.我尝试了其他一些方法，但似乎都没有.

I have tried to JSON.parse but that did not work. I tried a few other things but none seem to stick.

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

---------------------------------Update 1----------------------------

已引起我注意，我应该使用Observable.这是我尝试实现该功能所需要的，但目前无法正常工作:

It has been brought to my attention that I should be using an Observable. Here is what I have in trying to implement that but it is currently not working:

  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设置为其路径.但是我遇到以下错误:

I created a json file and set the variable url as its path. However I am getting to following error:

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())，但不允许将其转换.

It was suggested I use .map((response: Response) => <User[]> response.json()) but I was not allow to convert it.

经过进一步的研究，我发现这是最好的方法，并且正在尝试使其发挥作用，因此以后我可以使用它对数据库进行实际的HTTP调用.

After further research I found this is the the best approach and am trying to get it to function so later on I can use it to do actual HTTP calls against the DB.

推荐答案

在Angular2的世界中，您应该使用 rxjs 来满足您的要求，如下所示

In the world of Angular2, you should be using rxjs to achieve your requirement, as shown below

您的组件应订阅以下服务值

Your component should subscribe to the service values as below

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调用并返回以下数据

Your service should raise http calls and return data as below

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来保存数据模型，而应使用界面，如下面的演示所示.

Also, you should not use Class for holding your data model, instead use interface as shown in the demo below.

实时演示

LIVE DEMO

这篇关于将JSON解析为Angular 2对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！