将 http 响应映射到 typeScript 对象

Question

我正在尝试将 API 响应（json 字符串数组）转换为打字稿对象，但无法实现。我尝试添加地图功能，但无法正常使用。

示例 API 响应是 ["Paris","London","New York"]

我的城市class是这样的

export class City { Name:string; 
                    isAvailable: boolean;
                  }

我的函数

public getCities(queryId: string) : Observable<City[]> {
              const url = apiUrl;

              const response = this.http.get<string[]>(url)
                                   .pipe(catchError(this.handleError));
             //how can i add map method here to convert String to City object?

              return response;

         }

我希望输出像

[
  {Name:"Paris",isAvailable:true},
  {Name:"London",isAvailable:true}, 
  {Name:"New York",isAvailable:true}
]

Answer 1

首先，您需要一种方法将这些值实际放入 class。让我们只接受构造函数中的那些。

export class City {
  Name: string; 
  isAvailable: boolean;

  constructor(name: string, isAvailable: boolean) {
    this.Name = name
    this.isAvailable = isAvailable
  }
}

现在，假设 response 是您的 JSON 字符串，那么首先您要解析 JSON 字符串并将其转换为您期望的格式（即 string[]).

然后在其上映射以创建您需要的内容。

const cities: string[] = JSON.parse(response)
const cityObjects = cities.map(name => new City(name, true))

Answer 2

如果您希望在 RxJS 管道中处理此问题，您可以这样做。我们使用 RxJS map 运算符将响应转换为 City 对象数组。

public getCities(queryId: string) : Observable<City[]> {
  const url = apiUrl;

  return this.http.get<string[]>(url)                                
    .pipe(
      map((res) = {
        return res.map(name => ({
          Name: name,
          isAvailable: true,
        });
      }),
      catchError(this.handleError));   
}

Answer 3

您可以使用名为 tapi.js

的轻量级包自动映射数据

npm i -D tapi.js

然后您可以通过多种方式自动映射对象，因为您正在映射 JSON 数据，所以您可以这样做

http.YOUR_REQUEST
    .as(YourClass)
    .[then/pipe/whatever](typedObject => { ... })

您可以read the docs了解更多信息。

将 http 响应映射到 typeScript 对象

Mapping http response to typeScript object

rxjs

typescript

angular

angular7