How to display an [object Object] on angular UI?

Question

I am trying to display the response of my backend api http://localhost:3000/api/radar_life_cycle on the angular UI but somehow I get the output as [object Object] ,console.log on the response shows the correct object but not on the UI,what am I missing?any guidance on how to display the object on UI?

html

<textarea rows="6" [(ngModel)]="enteredValue"></textarea>
<hr>
<button (click)="get_radar_lifecycle_data()">Search</button>
<p>{{newPost}}</p>

component.ts

import { Component, OnInit, Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { Subject } from "rxjs";
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-radar-input',
  templateUrl: './radar-input.component.html',
  styleUrls: ['./radar-input.component.css']
})


export class RadarInputComponent  {

constructor(private http: HttpClient) {}
newPost = '';
get_radar_lifecycle_data(){
     this.http.get('http://localhost:3000/api/radar_life_cycle',{params:this.enteredValue}).subscribe(response => {
     console.log(response);
      this.newPost = response
      });
}

}

response:-

{message: "Posts fetched successfully!", posts: Array(1)}

CURRENT OUTPUT:-

Answer 1

You need inspect your object structure by json pipe

Display your object property by ngFor because result return Array.

https://stackblitz.com/edit/angular-d17ggk

Answer 2

You can use the built-in JSON pipe that Angular has which is included in @angular/common and is imported with BrowserModule or CommonModule:

<textarea rows="6" [(ngModel)]="enteredValue"></textarea>
<hr>
<button (click)="get_radar_lifecycle_data()">Search</button>
<p>{{newPost | json}}</p>

For more info about the pipe, check out the JsonPipe API.

Answer 3

By referring {message: "Posts fetched successfully!", posts: Array(1)}!

You can use *ngFor to display the Array like:

<div *ngFor="let item of newPost?.posts">
   {{ item.milestone }} 
</div>

or to display properties:

{{ newPost?.message }}

Edit:

Change:

newPost = '';

to:

newPost: any;

and you already have access of object of that array so you just need to do:

{{ item.milestone }}

Working Demo