Angular [object Object] result instead of data-CodePudding

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 >
  <div >
    <div >
      <div >
        <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"
                    ]
                }
            ]
        }
    }
}

CodePudding user response：

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"] }}

CodePudding user response：

use json pipe for data

example

<div>
        {{ cloudfeatures.data | json }}
</div>