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

Question

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

JSON 响应：

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

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

Answer 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;
});

Answer 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 代码，它们只是帮助您在开发过程中进行类型检查。在运行时间内不会检查数据结构，因此如果您的响应实际上看起来不像那样，您可能运行会遇到问题。

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

How to define a model class in angular8(TypeScript) or above for nested JSON response coming from SpringBoot backend code

json

typescript

angular6

angular8

angular10