如何为来自 SpringBoot 后端代码的嵌套 JSON 响应在 angular8(TypeScript) 或更高版本中定义模型类

Posted 2023-03-13

【中文标题】如何为来自 SpringBoot 后端代码的嵌套 JSON 响应在 angular8(TypeScript) 或更高版本中定义模型类

【英文标题】：How to define a model class in angular8(TypeScript) or above for nested JSON response coming from SpringBoot backend code

【发布时间】：2021-11-04 21:31:40

【问题描述】：

我想在 angular8 中为下面的嵌套 JSON 响应定义一个模型类。

JSON 响应：

  "message": "All Users fetched",
  "status": "Success",
  "data": [
    
      "userid": "abc22",
      "password": "abc22",
      "role": 1,
      "sessionid": "AWS1",
      "sessiontype": "RC01",
      "status": null
    
  ]

我不确定如何为嵌套的 JSON 响应执行此操作。有人可以帮我吗。 让我们假设上述字段的所有数据类型都是字符串。提前致谢

【参考方案1】：

你可以这样做：

class User 
    userId: string;
    password: string;
    role: number;
    sessionid: string;
    sessiontype: string;
    status: string;


class Response 
    message: string;
    status: string;
    data: User[];


const jsonData = 
  "message": "All Users fetched",
  "status": "Success",
  "data": [
    
      "userid": "abc22",
      "password": "abc22",
      "role": 1,
      "sessionid": "AWS1",
      "sessiontype": "RC01",
      "status": null
    
  ]


const response = new Response();
response.message = jsonData.message;
response.status = jsonData.status;
response.data = jsonData.data.map(userData => 
    const user = new User();
    user.userId = userData.userId;
);

【参考方案2】：

我假设您经常收到带有message 和status 字段的响应，但是data 字段的结构对于不同的请求是不同的。在这种情况下，我建议您使用这样的通用接口：

export interface ApiResponse<T> 
    message: string,
    status: "Success" | "Error", // Add more possible status responses if needed
    data: T

用户模型看起来像这样：

export interface User 
    userId: string,
    password: string,
    role: number,
    sessionid: string
    sessiontype: string,
    status: string // Or whatever type this should be

现在您可以像这样创建类型别名：

type UserResponse = ApiResponse<User[]>

并将它与 Angular 的 http 服务一起使用，如下所示：

this.http.get<UserResponse>('/api/endpoint/to/userlist')
    .subscribe(resp => 
        console.log(resp.data) // This should print out the list of users
    )

*编辑* 应该注意的是，我使用的是接口而不是类，因为这通常是您想要在 Angular 中执行的操作。接口在编译时不会生成任何 javascript 代码，它们只是帮助您在开发过程中进行类型检查。在运行时不会检查数据结构，因此如果您的响应实际上看起来不像那样，您可能会遇到问题。