Why does console give errors after fetching data from API Angular

Rihards Ādminis

I'm fetching data from API and want to display tabs for each object value. Everything works fine, just getting error in the console. Cannot read properties of undefined (reading 'Projects') Data is displaying correctly as it should. I'm assuming it cannot read it at first so it says it's undefined. And after fetching data appears.

How should I get rid of this error?

HTML:

<mat-tab *ngFor="let object of projects.Projects; let i = index" label="{{ object.Id }}"></mat-tab>

Component:

import { Component, OnInit } from '@angular/core';
import { TablesService } from "../tables/tables.service";

@Component({...})

export class MyComponent implements OnInit {
  projects: any;
  constructor(public tableService: TablesService)
  {
    this.tableService.fetchAPI().subscribe((data) => {
      this.projects = data;
    })
  }

  ngOnInit(): void {
  }

}
Octavian Mărculescu

This is happening because projects is only declared and not initialized, so until your API call is completed and you put some data in that variable, it will be undefined. One way to deal with this is to assume that projects could be undefined and use the ? (optional chaining operator) to account for that:

<mat-tab *ngFor="let object of projects?.Projects; let i = index" label="{{ object.Id }}"></mat-tab>

Another solution could be to give an initial value to the projects property:

projects: any = {};

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Fetching data from an API - Console Repeats

Data is not showing in app after fetching from an api

Fetching and combine data from Api In Angular 6

Trouble while fetching data from API in Angular

Applying Filter after Fetching data from api in React

Accessing certain item after fetching data from API with react

Render a functional component after fetching data from a POST API?

Why does lapply with closures give errors?

Why does the function glViewport () give me errors?

Why writing anything after the fileName of a #include directive does't give any errors in a C program?

Mutable live-data give multiple response give old response from api and after give new response

Angular 2 Error while fetching data from api

API is not fetching data in console when it is placed in javascript?

Fetching data from object in API

Fetching data from multiple api

Fetching data from api in react

Fetching data from API in django

Why does Angular give me a length related error, when I can console log the length if I wanted to?

Why does my Xamarin.Forms app crash after inserting data to a SQLite database from a web API?

Errors while fetching data

update RecyclerView after fetching data from server

Looking to delete a list item from an array of items after fetching list data from REST API

Update DOM after fetching from API in VueJS

Fetching data from api promise in react API

Why does PyCharm give unresolved reference errors on some Numpy imports?

fetching from a URL shows an error in console even after catching it?

How to render individual object within array after fetching data from API?

Getting 401 Error while fetching list from API after implementing JWT access token in Angular

SQL syntax does not give errors but displays wrong data