HttpClient - 通过更改某些值来映射Json数组结果

时间:2017-12-12 16:04:33

标签: json angular angular-httpclient

我在使用新HttpClient时遇到问题。

之前,我可以使用User[]将用户Json数组映射到reduce,如下所示:

export class User {
    constructor(
        public userId: number,
        public username: string,
        public password: string,
        public isValid: boolean,
        public type: string,
        public isValidPassword: boolean) {
    }
}

public loadAllUsers() {
    return this.http
        .post('/api/admin/getUsers/', 0)
        .map((res: any) => {
            return new User(
                res.userId,
                res.username,
                res.password,
                res.isValid === 'Y',
                res.type,
                res.isValidPassword === 'Y'
            );
        })
        .reduce((x, y) => { x.push(y); return x; }, <any[]>[]);
}

这是/api/admin/getUsers/回复的一部分:

[
  {
    "userId": 1,
    "username": "Ebraheem Alrabee",
    "password": "827ccb0eea8a706c4c34a16891f84e7b",
    "isValid": "Y",
    "type": "admin",
    "isValidPassword": "Y"
  },
  {
    "userId": 4,
    "username": "Sami",
    "password": "827ccb0eea8a706c4c34a16891f84e7b",
    "isValid": "Y",
    "type": "user",
    "isValidPassword": "Y"
  }, ...
]

我试过这个:

public loadAllUsers() {
    return this.http
        .post<User[]>('/api/admin/getUsers/', 0);
}

但我仍然希望使用map而不是直接反序列化到User[],因为有些值我希望更改为isValid

我如何使用新HttpClient做同样的事情,任何人都可以提供帮助?

2 个答案:

答案 0 :(得分:2)

您可以在那里使用.map来转换/修改isValid标志。另外,我建议您将User课程更改为界面。

public loadAllUsers(): Observable<User[]> {
    return this.http
     .post<any>('/api/admin/getUsers/', 0)
     .map((res: any) =>
        return <User[]>res.map(item => {
           item.isValid = item.isValid === 'Y';
           item.isValidPassword = item.isValidPassword === 'Y';
           return item;
        });
     });
}

答案 1 :(得分:1)

尝试以下,这应该适合你而不改变用户结构,你只需要修改你的函数的返回类型到用户数组

   loadAllUsers(): Observable<User[]> {
    return this.http.get("apiURL")
        .map(res => {
          return res.json().results.map(item => {
            return new User(
                  item.userId,
                item.username,
                item.password,
                item.isValid === 'Y' ? true : false,
                item.type,
                item.isValidPassword === 'Y' ? true : false
            );
          });
        });
  }

因为此方法返回可翻转的另一端使用loadAllUsers().subscribe(data=> this.userArray= data); - 如果没有它就可以使用它或者如果没有工作可以使用它

首先,您要做的是Get请求获取数据,您可以这样做

你的用户类将是

export class User{
    userId: number;
    username: string;
    password: string;
    isValid: string;
    type: string;
    isValidPassword: string;
    get isValidPasswordBool():boolean {
       return this.isValidPassword=='Y';
    }
    get isValidBool():boolean {
       return this.isValid=='Y';
    }
}

调用http服务,如下所示

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, 
             Response, ResponseContentType } from '@angular/http';

GetAllUser(): Observable<Array<User>> {
    let options = new RequestOptions({ headers: headers });
    return this._http.get("/api/admin/getUsers/",
                       options).subscribe(response => response.json());
}