如何在 Angular 类中表示嵌套的 JSON？答案

【问题标题】：How to represent nested JSON in Angular Classes?如何在 Angular 类中表示嵌套的 JSON？
【发布时间】：2020-01-25 12:48:17
【问题描述】：

我从服务器获取这个 JSON：

"Body": {
    "ErrorsContent": {
        "FunctionalError": [
            {
                "Code": "110900",
                "Error": "xx",
                "Position": "xx",
                "Value": ""
            },
            {
                "Code": "110900",
                "Error": "xx",
                "Position": "xx",
                "Value": ""
            },
            {
                "Code": "110900",
                "Error": "xx",
                "Position": "xx",
                "Value": ""
            },
            {
                "Code": "110902",
                "Error": "xx",
                "Position": "xx",
                "Value": ""
            },
            {
                "Code": "110900",
                "Error": "xx",
                "Position": "xx",
                "Value": ""
            }
        ]
    }
}

我需要它来解析一个 Angular 对象，所以我创建了几个类：

export class Body{
    public ErrorsContent: ErrorsContent;
}

class ErrorsContent{
    public FunctionalError: FunctionalError;
}

class FunctionalError{
    public Code: any;
    public Error: any;
    public Position: any;
    public Value: any;
}

但是当我有多个 FuntionalError 时，这不起作用。

如何设置FuntionalError 类以便我可以拥有多个一个错误而不是一个类本身？

欢迎任何建议！谢谢。

【问题讨论】：

下面的答案是正确的，但我也建议您 1) 将您的数字值（如 Code）作为数字而不是字符串发送，2）不要使用 : any 类型。给它一个正确的→在你的情况下string或者如果你按照提示1）也number
使用jsontots.com之类的在线助手将服务器响应转换为ts类并避免错误。
@MauriceNino +1 属性名称也应该以小写开头，例如 Code 在类和服务器响应中应该是 code
感谢您的建议，但我从远程服务器收到 JSON，所以我与此无关 :) @MauriceNino

标签： javascript json angular typescript parsing

【解决方案1】：

将您的 ErrorsContent 类更改为

class ErrorsContent{
    public FunctionalError: FunctionalError[];//it should be array 
}

【讨论】：

如果 JSON 带有一个 FuntionalError 而它不在 [ ] 内怎么办？
@Iñigo 我不建议你这样做必须有一致的格式。例如，你执行 foreach 并且你得到 object 而不是 array 你的代码会中断跨度>

【解决方案2】：

FunctionalError 是一个array。您将其声明为object。

使用

class ErrorsContent {
    public FunctionalError: FunctionalError[];
}

而不是

class ErrorsContent {
    public FunctionalError: FunctionalError;
}

您可以使用任何在线工具将服务器 JSON 响应转换为 TS 类。例如：jsontots、json2ts 等

【讨论】：

【解决方案3】：

试试这样：

class ErrorsContent{
    public FunctionalError: Array<FunctionalError>;
}

【讨论】：