Angular11 "Cannot read properties of undefined" when handling data from API

Question

I want to get data back from an API but when I want to put the data in an object (model) and log it in the console it gives back undefined.

The same thing when I use it in my HTML with databinding, there its then also undefined. But when I log it to the console on complete in the subscribe function it does log in the console

My ts file:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { BannerStat } from 'src/app/models/banner.model';
import { Home, Banner } from 'src/app/models/home.model';
import { HomeService } from 'src/app/services/home.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class HomeComponent implements OnInit {
  home: Home;
  bannerList : Banner[];
  

  constructor(private homeService: HomeService) {}

  ngOnInit(): void {

    this.handleData();

    // this gives back undefined banner
    // when I use it as data in my html its also undefined
    console.log(this.bannerList);
    console.log(this.topMessage);

    
  }

  handleData(): void {
    this.homeService.getHomeObject<Home[]>().subscribe({
        next: (response) => {
          this.home = response[0];
        },
        error: (err: any) => {
          console.log(err);
        },
        complete: () => {
          this.bannerList = this.home.bannersBanners;
          // these both log the correct data
          console.log(this.home.topMessage);
          console.log(this.bannerList)
        }
      }
    );
  }

}

The object and "list" aren't initialised on time the ngOnInit or the page is loaded. I've also tried to put the "handleData()" function in the constructor but no luck.

I've checked multiple posts and browsed the net but I don't see where I need to change something...

Does this answer your question? [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron), also: [How to return the response from an asynchronous call](https://stackoverflow.com/a/14220323) — Nick Parsons, Oct 19 '21 at 11:21

score 0 · Answer 1 · answered Oct 19 '21 at 11:30

This is due to asynchrone process in handleData().

The problem is that ngOnInit call handleData but doesn't wait for the answer and go on by console logging the object and list (js works like this, it's normal). Then the answer is coming from the api... but to late for the console.log in ngOnInit.

You can turn around this with a .toPromise() and await in the ngOnInit() like:

await handleData().toPromise().then(response => {console.log(response);}).

score 0 · Answer 2 · answered Oct 19 '21 at 11:44

0

You need defined home variable like this home: Home = new Home(); then assign data which come from API. Same for also bannerList:: Banner[] = new Banner[]

answered Oct 19 '21 at 11:44

KEVAL PANCHAL

535
3
14

Angular11 "Cannot read properties of undefined" when handling data from API

2 Answers2