Question

如果我用以下方法定义一个类：

export class xy {
  name: string;
}

并使用如下所示的http.get()导入JSON：

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

如何将JSON轻松转换为xy[]？由于它们都具有确切的结构。有功能吗？还是我必须创建一个自己的函数，将每个元素复制到xy数组中？

问候

Answer 1

您可以使用f。它接受get方法的通用类型：

HttpClient

订阅从此this.http.get<xy[]>('YOUR_URL');方法返回的内容，将返回一个get类型的数组

在使用此方法之前，请确保将xy添加到HttpClientModule的{{1}}数组中。

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

考虑将接口用于数据模型。

这是一个更具体的例子：

imports

这是使用JSONPlaceholder的Mock Todos服务的Sample StackBlitz。

Answer 2

您可以通过向类中添加方法并在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 3

如果形状完全相同，则可以执行以下操作：

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

obj是您从后端获得的结果。

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

interface xx {
    name: string;
}

那么您应该可以使用this.http.get<xy[]>('path/to/resource')

将Angular http.get（）JSON转换为自己的类

3 个答案: