*ngFor not displaying data

Question

component.ts file

posts= [];
  constructor( private http:HttpClient) { 
    http.get('https://jsonplaceholder.typicode.com/posts')
    .subscribe(response=>{
      this.posts.push(response)
      console.log(this.posts)
    });
  }

in HTML file

<ul class="list-group">
  <li 
    *ngFor="let post of posts"
    class="list-group-item">{{post.title}}</li>
</ul>

I can see the data from array if I consoled but for some reason the *ngFor only displays one blank container.

Answer 1

The response of https://jsonplaceholder.typicode.com/posts is array of objects

[
  {
   userId: 1,
   id: 1,
   title: "sunt aut facere repellat",
   body: "quia et suscipit suscipit recusandae consequuntur"
  },
 {
   userId: 1,
   id: 2,
   title: "qui est esse",
   body: "est rerum tempore vitae sequi"
 },
]

so instead of pushing array of object within array, all you need to assign the response.

Create a posts interface instead of using any[] type casting

export interface IPosts = {
  userId: number;
  id: number;
  title: string;
  body: string;
}

Now fetch data from end point

posts: IPosts[]; // notice the type instead of any we have proper type.

constructor(private http:HttpClient) { 

const url = 'https://jsonplaceholder.typicode.com/posts';
http.get(url).subscribe((response: IPosts[]) => this.posts = response)}

And in template just iterate the result.

<ul class="list-group" *ngIf="posts.length"> <=== for safe side you could use if condition only show if posts are available.
  <li 
    *ngFor="let post of posts"
    class="list-group-item">{{post.title}}</li>
</ul>

Answer 2

The response from https://jsonplaceholder.typicode.com/posts is an array of objects. But you are using Array.push() to add items to posts array. So the posts array will have only 1 item (which is array of objects) and that item will not have title property.

Try doing this:

  posts = [];

  constructor( private http:HttpClient) { 
    http.get('https://jsonplaceholder.typicode.com/posts')
    .subscribe(response=>{
      this.posts = response
      console.log(this.posts)
    });
  }

---

You can also use async pipe in this situation

 posts = this.http.get('https://jsonplaceholder.typicode.com/posts');

 constructor( private http:HttpClient) {}



<ul class="list-group">
  <li *ngFor="let post of posts | async" class="list-group-item"> 
     {{post.title}}
  </li>
</ul>