Angular [object Object] result instead of data - json

Question

I've been trying to display the json result i'm getting from my backend. However I'm not able to display this json fully in my angular front-end. The json I'm getting also has . and - in it's naming. These are my classes currently and i can display the name and title but the data returns [object Object]
How can i return the data object and use this for instead in a form?
Unfortunately I don't have the possibility to format the json in the back-end
Models
export interface Data {
"Cloud-Features:CloudFeatures": CloudFeatures
}
export interface CloudFeatures {
"redis.hosts": string
"sentinel.active": boolean
"script.type": ScriptType[]
}
export interface ScriptType {
name: string
features: string[]
}
export interface Root {
name: string
title: string
data: Data
}
Component
export class CloudFeaturesComponent implements OnInit {
cloudfeatures!: any;
constructor(private cloudfeatureservice : CloudFeaturesService, private titleService: Title) {
this.titleService.setTitle("Cloud Features")
}
ngOnInit(): void {
this.loadCloudFeaturesConfig();
}
loadCloudFeaturesConfig() {
this.cloudfeatureservice.getCloudConfig().subscribe(cloudfeatures => {
this.cloudfeatures = cloudfeatures
})
}
}
Maybe it's also better to use Root instead of any here?
Service
export class CloudFeaturesService {
baseUrl = environment.ApiUrl;
constructor(private http : HttpClient) {
}
getCloudConfig(){
return this.http.get<any>(this.baseUrl + 'cloudfeatures');
}
}
HTML
<div class="row">
<div class="tile sm-12">
<div class="content">
<div class="box">
<h1></h1>
<p>{{ cloudfeatures | json }}</p>
</div>
<div>
{{ cloudfeatures.name }}
</div>
<div>
{{ cloudfeatures.title }}
</div>
<div>
{{ cloudfeatures.data }}
</div>
</div>
</div>
</div>
JSON
{
"name":"CloudFeatures",
"title":"CloudFeatures model",
"data":{
"Cloud-Features:CloudFeatures":{
"redis.hosts":"TestURL2",
"sentinel.active":true,
"script.type":[
{
"name":"test123",
"features":[
"Start",
"test123",
"qwerty"
]
}
]
}
}
}

Answer 1

I assume your problem is that {{cloudfeatures.data}} only renders [object Object]. This happens, because 'cloudfeatures.data' is no primitive type, but an JSON object. If you want to render the whole JSON object, you should use the json pipe.
If you want to access a specific property of this object, you can use either dot notation or bracket notation. Bracket notation is needed in your case, since you have special characters in your object keys. Example:
{{ cloudfeatures.data["Cloud-Features:CloudFeatures"] }}

Answer 2

use json pipe for data
example
<div>
{{ cloudfeatures.data | json }}
</div>