ngFor didn't get any data from array object

Question

The ngFor doesn't display the items. Is it because of that value below was evaluated just now error in console? Any way to fix this?

Service to get data:

  getBooks(id) {
    return this.httpClient.get(
      `${this.BooksApiService.baseUrlBooks}detail/${id}/`,
      {
        headers: this.headers,
      }
    );
  }

Component:

  books: any = [];
  bookId : any;

ngOnInit() : void {
    this.route.paramMap.subscribe(params => {
      this.booksId = params.get('detail')
    })

    this.getBooks(this.bookId).subscribe(books => {
      this.books.push(books)
    });
    console.log(this.books)
  }

Template:

<div *ngFor="let book of books">
    <div *ngFor="let result of book.results">
        <h3>{{result.id}}</h3>
    </div>
</div>

Postman JSON from http://localhost:8000/api/books/detail/1[ params url ]/

{
    "message": "Visit Added",
    "results": {
        "user": {
            "id": 1,
            "username": "imboyo"
        },
        "id": 1,
        "title": "A Story About a Grandpa and Grandma Who Returned Back to Their Youth",
        "alternative_titles": [],
        "artist": [
            {
                "id": 1,
                "name": "Araido Kagiri"
            }
        ],
    ...
}

Answer 1

I think it's just the timing issue. Can you restructure the code something like below and please let me know if that fixes your issue.

Method 1:

.ts

 books: any = [];
  bookId : any;

ngOnInit() : void {
    this.route.paramMap.subscribe(params => {
      this.booksId = params.get('detail');
      this.getBooks(this.bookId).subscribe(books => {
         this.books.push(books);
         console.log(this.books);
      });
    });
  }

.html

From the image provided, result is not an array, and its an object. So change your HTML something like below.

<div *ngIf="books && books.length > 0>
     <div *ngFor="let book of books">
            <h3>{{book.result.id}}</h3>
    </div>
</div>

Explanation:

First thing in the typescript file, we cannot say whether booksId gets the value before doing the API call, so I have restructured as you have execute the API call only after getting the booksId value.

In HTML you can render into the DOM only if the array length is greater than 0. You are receiving "value below was evaluated just now" due to the change detection mechanism in angular.

Reference: https://ionic-framework.programmingpedia.net/en/knowledge-base/45496171/cannot-get-the-data-due-to--value-below-was-evaluated-just-now-

how to fix "value below was evaluated just now" in angular 7

Method 2:

Can you try console.log using JSON.stringify something like below.

.ts

 books: any = [];
 bookId : any;

ngOnInit() : void {
    this.route.paramMap.subscribe(params => {
      this.booksId = params.get('detail');
      this.getBooks(this.bookId).subscribe(books => {
         this.books.push(books);
         console.log(JSON.stringify(this.books, null, 2));
      });
    });
  }

Reference: https://medium.com/@decker/javascript-developer-console-fe6fa491654a

Answer 2

To Get Data from Api In Angular

Servie.ts

import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';
import { Http, Headers, Response } from '@angular/http';
import { environment } from '../../../environments/environment';

@Injectable({
    providedIn: 'root'
})
export class Service {

    constructor(private http: Http) { }


 GetData() {
        return this.http.get('APIURL').pipe(map((response: any) => response.json()));
    }

Component

    public APIDATA : string;
    ngOnInit(){
        this.Service.GetData().subscribe((res) => {
           console.log(res);
           this.APIDATA = res;           
        }
      }

HTML

<div *ngFor="let data of APIDATA">
    <div>
        <h3>{{data}}</h3>
    </div>
</div>