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

Posted 2023-03-13

【中文标题】如何在 Angular 类中表示嵌套的 JSON？

【英文标题】：How to represent nested JSON in Angular Classes?

【发布时间】：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

【参考方案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>;