CODEWITHSUNDEEP
javascriptangularngfor
AcidHawk
AcidHawk

Reputation: 566

ngFor not displaying when only 1 item returned in array

I have a json array that I collect from a REST API call looks as follows:

[ 
    {"id":1,"title":"Title One","author":"Auth One"},
    {"id":2,"title":"Title Two","author":"Auth Two"},
    {"id":3,"title":"Another Title","author":"Another author"}
]

I created a class posts.model.ts to represent what a post consists of:

export class Post {
    id: Number;
    title: string;
    author: string;
}

My view-component.component.html (I know horrible name I am sorry) looks as follows:

<p>
    Post ID:<br>
    <input type="text" [(ngModel)]="id">
</p>
<p>
    <button (click)="search()">Search</button>
</p>
<div *ngIf="PostList">
    <div *ngFor="let post of PostList">
        Post ID: {{post.id}}<br>
        Post Title: {{post.title}}<br>
        Post Author: {{post.author}}
        <hr>
    </div>
</div>

and my view-component.component.ts like this

import { Component, OnInit, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Post } from './post.model';

@Component({
  selector: 'app-view-component',
  templateUrl: './view-component.component.html',
  styleUrls: ['./view-component.component.css']
})
export class ViewComponentComponent implements OnInit {

  @Input('post') post: Post;
  id: string = "";
  PostList: any = [];

  constructor(private http: HttpClient) { }

  ngOnInit(): void { }

  search() {
    this.http.get('http://localhost:3000/posts/' + this.id)
    .subscribe((data: {}) => {
      this.PostList = data;
      console.log("This is what I got back = " + JSON.stringify(data));
    })
  }

}

What I have observed is that when I click the button with nothing in the input field (I want all the posts to be returned (this works as expected and I get a full list of all the posts)).

However when I enter for example the number "2" in the input field and click the button I expect to only see the 2nd post ("Title Two" "Auth Two") displayed, however nothing is displayed.

As you can see in the ".ts" file I am writing out to the console the string I get back in the search() function. When I search for the 2nd post I do get the following :

This is what I got back = {"id":2,"title":"Title Two","author":"Auth Two"}

However, nothing is displayed on the html page.

Upvotes: 1

Views: 327

Answers (2)

Tariq Saeed
Tariq Saeed

Reputation: 1193

Here is how I would implement it:

  • I would use interface instead of class like so 

    export interface Post {
    id: Number;
    title: string;
    author: string;
}

  • I would then use the created interface in the array declaration PostList: Post[]; and I would also leave it undefined so that the <div *ngIf='PostList'> works because the check will only be false if the array is undefined.

  • I would also use the interface when calling the API this.http.get<Post[]> and use it again when receiving data from the API .subscribe((data: Post[]) => 

    this.http.get<Post[]>('http://localhost:3000/posts/' + this.id)
    .subscribe((data: Post[]) => {
      this.PostList = data;
      console.log("This is what I got back = " + JSON.stringify(data));
    })

Please don't hesitate to reach me out for further assistance if needed.

Upvotes: 1

Anurag Srivastava
Anurag Srivastava

Reputation: 14413

Right now you return an object. You need to return an array with 1 element from your back end:

[{"id":2,"title":"Title Two","author":"Auth Two"}]

Upvotes: 1

Related Questions