Angular http.get() JSON 成自己的类

Question

如果我定义一个类：

export class xy {
name: string;
}

并导入一个带有如下所示http.get()的 JSON：

[{"name": "peter"},{"name": "andre"}]

如何以简单的方式将 JSON 转换为xy[]？因为它们都具有确切的结构。是否有用于此的功能，或者我是否必须创建一个自己的函数来将每个元素复制到xy数组中？

问候

Answer 1

您可以通过向类中添加方法并在 GET 回调中运行它来创建自定义反序列化，或者您可以使用库，例如用于打字稿的 cerialize(不知道 JS 有什么好的，我会创建手动方法(。

这里有一个例子：

export class Xy {
name: string;
static Deserialize(jsonArray) {
jsonArray.map((json) => {
const xy = new Xy();
xy.name = json.name;
return xy;
}
}
}

在回调中，执行以下操作：

http.get(...).then((res) => {
const items = Xy.Deserialize(res);
})

根据您的情况，可以通过一些错误处理和属性检查来微调它。

如果您使用 Typescript，我一直在使用 cerialize 库，因为它允许使用装饰器来定义序列化类型，当您有更复杂的数据继承和 API 兼容性要求时，这会减少大量开销。该库处理轻松的数组。 您的示例如下所示：

import {serialize} from 'cerialize';
export class Xy {
@serialize
public name: string;
}

在 GET 的回调上：

import {Deserialize} from 'cerialize';
http.get(...).then((res) => {
const items = Deserialize(res, Xy);
})

Answer 2

如果形状完全相同，您可以这样做：

Object.assign(new xx(), obj);

obj是从后端获得的结果。

我在这里的问题是，你真的需要上课吗？如果 xy 应该只有字段而没有方法，则可以改用接口。

interface xx {
name: string;
}

然后你应该能够使用this.http.get<xy[]>('path/to/resource')

Answer 3

您可以使用HttpClient.它接受 get 方法的泛型类型：

this.http.get<xy[]>('YOUR_URL');

订阅从此get方法返回的任何内容将返回类型为xy的数组

不过，在使用它之前，请确保将HttpClientModule添加到NgModule的imports数组中。

理想情况下，您应该具有数据模型的接口而不是类。这就是Angular StyleGuide推荐的：

请考虑对数据模型使用接口。

这里有一个更具体的例子：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
export interface Todo {
userId: number;
id: number;
title: string;
completed: boolean;
}
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
name = 'Angular';
todos: Todo[];
constructor(private http: HttpClient) {}
ngOnInit() {
this.http.get<Todo[]>('https://jsonplaceholder.typicode.com/todos?userId=1')
.subscribe(todos => this.todos = todos);
}
}

下面是一个使用 JSONPlaceholder 的 Mock Todos Service 的示例StackBlitz。