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

Question

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

JSON响应:

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

我不知道如何为嵌套的JSON响应。有人能帮我一下吗?让我们假设上述字段的所有数据类型都是String。提前感谢

Answer 1

我假设您经常有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代码，它们只是在开发过程中帮助您进行类型检查。在运行时不会检查数据结构，所以如果你的响应实际上看起来不像，你可能会遇到问题。

Answer 2

你可以这样做:

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