Angular 中的 JSON 到 TypeScript答案

【问题标题】：JSON to TypeScript in AngularAngular 中的 JSON 到 TypeScript
【发布时间】：2018-05-30 23:13:46
【问题描述】：

我有一个 angular 的 http 服务，它调用 web api 来获取需要反序列化为 typescript (.ts) 对象的 JSON 数据。 JSON 中的键名（即“Property”）与我在 typescript 中的名称（即“property”）不匹配——这意味着 JSON 数据是大写的，而 typescript 是小写的。是否有一个带有角度 http 调用的映射函数，我可以将 json 反序列化为打字稿？

从 web api 返回的 JSON 示例

"Packages": [
      {
          "IsESignAllowed": false,
          "IsEnabled": true,
          "Name": "Brokerage Accounts Package",
          "PackageId": 2
      }
]

Angular 上的关联 .ts 文件

export class Package {
    public isESignAllowed: boolean;
    public isEnabled: boolean;
    public name: string;
    public packageId: number;
}

【问题讨论】：

映射应该发生在你的后端，而不是你的 Angular。您需要注册您的 web api 配置以使用骆驼格式格式化 json。
另外，您的陈述“meaning JSON data is Uppercase and typescript is lowercase”不正确。 JSON 大小写标准是驼峰大小写，打字稿也是。毕竟它们都是 Javascript。

标签： json angular typescript

【解决方案1】：

您可以在 typescript 中为您的 Package 类添加一些序列化函数，这将允许您将 JSON 对象从服务器映射到 TS 中的新 Package 对象。

如前所述，最好在任何地方都保持标准的驼峰式大小写约定 - 并让服务器发送带有小写属性名称的 JSON，但是，如果这不可能，这仍然可以在您的序列化函数中处理。

export class Package {
    public isESignAllowed: boolean;
    public isEnabled: boolean;
    public name: string;
    public packageId: number;

    static fromJson(jsonObj: any) {
        const newPackage = new this();
        newPackage.isESignAllowed = jsonObj.IsESignAllowed;
        newPackage.isEnabled = jsonObj.IsEnabled;
        newPackage.name = jsonObj.Name;
        newPackage.packageId = jsonObj.PackageId;
        return newPackage;
    }

    public toJson(): any {
        const jsonObj: any = {};
        jsonObj.IsESignAllowed = this.isESignAllowed;
        jsonObj.IsEnabled = this.isEnabled;
        jsonObj.Name = this.name;
        jsonObj.PackageId = this.packageId;
        return jsonObj;
    }
}

从服务器收到 JSON 后，您现在可以将包数组映射到新的 Package.fromJson() 函数，以创建包对象列表。

const packages = serverResponse.Packages.map(packageJson => Package.fromJson(packageJson));

【讨论】：