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

Question

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

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

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 做同样的事情，有人可以帮忙吗？

Answer 1

尝试下面的方法，这应该可以在不更改用户结构的情况下为您工作，您只需将函数的 return 类型修改为 User

数组

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

因为这个方法 return 可以在另一端使用 loadAllUsers().subscribe(data=> this.userArray= data); - 如果没有它就可以工作，或者如果不起作用就使用它

首先，您尝试做的是 Get 请求获取数据，您可以这样做

您的用户 class 将是

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

Answer 2

你可以在那里使用 .map 到 transform/modify isValid 标志。另外，我建议您将 User class 更改为接口。

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

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

HttpClient - Mapping Json array result with changing some values

json

angular

angular-httpclient