Data not showing up in *ngFor loop

Question

Data not showing up in *ngFor loop

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)
    });
  }

Within the HTML file

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

While I can successfully see the data from array in the console log, the *ngFor directive appears to only display an empty container. Strange!

javascript angular typescript

Answer 1

Answer №1

The response of

https://jsonplaceholder.typicode.com/posts

is an 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"
 },
]

Instead of pushing an array of objects within another array, you just need to assign the response directly.

Define a posts interface instead of using any[] for type casting

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

Now fetch data from the endpoint

posts: IPosts[]; // Notice the proper type assignment.

constructor(private http:HttpClient) { 

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

In the template, iterate through the results.

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

Answer 2

The response of

https://jsonplaceholder.typicode.com/posts

is an 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"
 },
]

Instead of pushing an array of objects within another array, you just need to assign the response directly.

Define a posts interface instead of using any[] for type casting

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

Now fetch data from the endpoint

posts: IPosts[]; // Notice the proper type assignment.

constructor(private http:HttpClient) { 

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

In the template, iterate through the results.

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

Answer 3

Answer №2

The data retrieved from

https://jsonplaceholder.typicode.com/posts

consists of an array of objects. However, instead of using Array.push() to add items to the posts array, you are mistakenly overwriting it with just one item (an array of objects) that lacks a title property.

To correct this issue, consider the following approach:

  posts = [];

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

An alternative solution is to utilize the async pipe in this scenario

 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>

Answer 4

The data retrieved from

https://jsonplaceholder.typicode.com/posts

consists of an array of objects. However, instead of using Array.push() to add items to the posts array, you are mistakenly overwriting it with just one item (an array of objects) that lacks a title property.

To correct this issue, consider the following approach:

  posts = [];

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

An alternative solution is to utilize the async pipe in this scenario

 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>

Data not showing up in *ngFor loop

Answer №1

Answer №2

Similar questions

How can you update ngModel in Angular and mark the form as dirty or invalid programmatically?

Tips for preventing an AJAX response from populating a select dropdown

Downloading Laravel Excel Files via an Ajax Call

Issue encountered while retrieving information from an external API

Executing numerous TypeScript 'tsc' commands

What is the proper way to trigger a nested jQuery function in HTML?

Looping through JQuery change events

Storing the outcome of a query into a variable in Node-RED

Populate an AngularJS select dropdown with JSON data and automatically pre-select the specified value

Which is better for a jQuery/Ajax Login Box: JSONP or CORS?

An error occurred in jQuery.ajax: The object's property 'xhr' is not a function

What is the best way to extract the requested URL from an AJAX response?

The app's connection issue persists as the SDK initialization has exceeded the time limit

Develop an innovative showcase page showcasing 151 individual profiles with React Router

Guide to inserting nested arrays into a MongoDB database using Node.js

Animating nested child routes with framer-motion in react-router-dom version 6.4.3

Indicate when a ReplaySubject has reached its "completion" signal

Load link dynamically using the rel attribute

The arrow icon for selecting input in Material Dashboard React is missing

The HTMLElement type does not include the Ionic typescript property