[英]Angular 8 - HttpClient GET a complex JSON object
I am using Angular 8, and am querying an endpoint to get a permissions object. 我正在使用Angular 8,并且正在查询端点以获取权限对象。 When I call it via Postman, I get the following returned JSON: 通过邮递员调用它时,得到以下返回的JSON:
GET https://endpoint/@{xxx}/permissions
获取https://endpoint/@{xxx}/permissions
Returns: 返回:
{
"continents": {
"order": 2,
"actions": {
"show": true
},
"children": {}
},
"car manufacturers": {
"order": 3,
"actions": {
"show": true
},
"children": {}
},
"products": {
"order": 1,
"actions": {
"show": true,
"getItems": {
"type": "GET",
"URL": "https://endpoint/@{xxx}/products"
},
"updateItem": {
"type": "PUT",
"URL": "https://endpoint/@{xxx}/products/{id}"
},
"addItem": {
"type": "POST",
"URL": "https://endpoint/@{xxx}/products"
}
},
"slug": "/products/",
"children": {}
}
}
In Angular 8, I then have a service, where I want to make an http call to to the endpoint that will return the above JSON. 然后在Angular 8中,我有一个服务,在这里我想对将返回上述JSON的端点进行http调用。
// GET
GetIssues(): Observable<Permissions> {
return this.http.get<Permissions>(this.baseurl + '/permissions/')
.pipe(
retry(1),
catchError(this.errorHandl)
)
}
As you can see the result needs to be put into the Permissions
object. 如您所见,需要将结果放入Permissions
对象。
Question 题
In TypeScript, what should this Permissions
object look like? 在TypeScript中,此Permissions
对象应该是什么样的?
export class Permissions {
...
}
I appreciate your help. 我感谢您的帮助。
You have to add response json schema , as per typescript basic types 您必须根据typescript 基本类型添加response json模式
01- the simple way, If you are using Visual Studio Code you can add Paste JSON as Code lib 01-简单的方法,如果您使用的是Visual Studio Code,则可以将Paste JSON添加为Code lib
02- Or You can copy paste all json and remove quotes and change values to be the type, please check the simple schema, you can change objects to be classes and add it's reference in the Permissions class 02-或者您可以复制粘贴所有json并删除引号并将值更改为类型,请检查简单的架构,可以将对象更改为类并将其引用添加到Permissions类中
export class Permissions {
continents: {
order: number;
actions: {
show: true;
};
children: {};
};
'car manufacturers': {
order: number;
actions: {
show: boolean;
};
children: {};
};
products: {
order: number,
actions: {
show: boolean,
getItems: {
type: string,
URL: string
},
updateItem: {
type: string,
URL: string
},
addItem: {
type: string,
URL: string
}
},
slug: string ,
children: {}
};
}
to access car manufacturers
value you have to access this by square brackets because it has space between => permission['car manufacturers']
要获得car manufacturers
价值,您必须使用方括号来访问它,因为它在=> permission['car manufacturers']
之间有空格
for the children object if you don't know it's schema yet, you can define that I have any key and any value by the below code 对于子对象,如果您尚不知道其架构,则可以通过以下代码定义我具有任何键和任何值
children: {
[key: string]: any
};
Object oriented schema 面向对象的架构
class Permissions {
continents: CarManufacturers;
"car manufacturers": CarManufacturers;
products: Products;
}
class CarManufacturers {
order: number;
actions: CarManufacturersActions;
children: Children;
}
class CarManufacturersActions {
show: boolean;
}
class Children {
}
class Products {
order: number;
actions: ProductsActions;
slug: string;
children: Children;
}
class ProductsActions {
show: boolean;
getItems: AddItem;
updateItem: AddItem;
addItem: AddItem;
}
class AddItem {
type: string;
URL: string;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.