Angular cannot find property of undefined

Question

I'm relatively new to Angular, and I'm having trouble using a service to return a single value. Here is the relevant code:

This component is supposed to retrieve data from a specific team stored in a .json file that includes data for several teams.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { StandingsService } from '../standings/standings.service';
import { IStanding } from '../standings/standing';

@Component({
  selector: 'ur-teams',
  templateUrl: './teams.component.html',
  styleUrls: ['./teams.component.css']
})
export class TeamsComponent implements OnInit {
  teamName; currAge; currDiv; 
  currTeam: IStanding;
  errorMessage: '';

  constructor(private route: ActivatedRoute,
    private router: Router,
    private standingService: StandingsService) {
  }
  ngOnInit() {
    this.teamName = this.route.snapshot.paramMap.get('team').toLowerCase();
    this.currAge = this.route.snapshot.paramMap.get('age').toLowerCase();
    this.currDiv = this.route.snapshot.paramMap.get('division').toLowerCase();
    this.getTeam(this.currAge, this.currDiv, this.teamName);
  }
  getTeam(age: string, gender: string, teamName: string): void {
    this.standingService.getTeam(age, gender, teamName).subscribe({
      next: team => this.currTeam = team,
      error: err => this.errorMessage = err
    });
  }

This is the service that grabs the data from the .json file:

import { Injectable } from '@angular/core';
import { IStanding } from './standing';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';

@Injectable({
    providedIn: 'root'
})
export class StandingsService {
    private standingsUrl = 'api/standings/';
    private newUrl;
    allTeams;
    team;
    team_pipe;
    constructor(private http: HttpClient){}

    getStandings(ageDivison: string, gendDivision: string): Observable<IStanding[]> {
        this.newUrl = this.standingsUrl + ageDivison + '/' + gendDivision + '.json';
        return this.http.get<IStanding[]>(this.newUrl).
            pipe(
                tap(data => console.log('All: ' + JSON.stringify(data))),
                catchError(this.handleError)
            ); 
    }
    getTeam(age: string, gender: string, teamName: string): Observable<IStanding | undefined>{
        return this.getStandings(age, gender)
            .pipe(
                map((standings: IStanding[]) => standings.find(
                    t => t.teamName.toLowerCase() === teamName.toLowerCase()))
            );
    }
    private handleError(err: HttpErrorResponse){
        let errorMessage = '';
        if (err.error instanceof ErrorEvent) {
          errorMessage = `An error occurred: ${err.error.message}`;
        } else {
          errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`
        }
        console.error(errorMessage);
        return throwError(errorMessage);
    }
}

and this is the HTML that is being displayed in correlation to the teams component:

<table class="table table-bordered table-striped table-hover">
    <thead class="thead">
        <tr><th class="text-center" id="borderless-cell" colspan="4">{{teamName}}</th></tr>
    </thead>
    <thead class="thead-dark">
        <tr>
            <th mat-sort-header="rank">Rank</th>
            <th mat-sort-header="teamName">Team</th>
            <th mat-sort-header="powerRanking">PR</th>
            <th mat-sort-header="region">Region</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>FIX</td>
            <td><a routerLinkActive='active' [routerLink]="['/teams']">{{currTeam.teamName}}</a></td>
            <td>{{currTeam.powerRanking}}</td>
            <td>{{currTeam.region}}</td>
        </tr>
    </tbody>
</table>
<table class="table table-bordered table-striped table-hover">
    <thead class="thead">
        <tr><th class="text-center" id="borderless-cell" colspan="5">Current Season Tournaments</th></tr>
    </thead>
    <thead class="thead-dark">
        <tr>
            <th mat-sort-header="rank">Seed</th>
            <th mat-sort-header="teamName">Finish</th>
            <th mat-sort-header="powerRanking">W</th>
            <th mat-sort-header="region">L</th>
            <th mat-sort-header="region">+/-</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor='let tournament of currTeam.tournaments'>
            <td>FIX</td>
            <td><a routerLinkActive='active' [routerLink]="['/teams']">{{currTeam.teamName}}</a></td>
            <td>{{currTeam.powerRanking}}</td>
            <td>{{currTeam.region}}</td>
        </tr>
    </tbody>
</table>

The first table actually prints with the currTeam.teamName, currTeam.powerRanking, and currTeam.region, but if I try to console.log(this.currTeam) in the teams component it returns an "undefined". I also get an error log when loading the teams component page that says:

ERROR TypeError: Cannot read property 'teamName' of undefined at TeamsComponent_Template (teams.component.html:16)

lastly, the 2nd table which should populate with tournament information is empty. For reference, this is what a single team looks like in the json file:

{
        "teamName" : "Sockeye",
        "powerRanking": 1000,
        "region": "OV",
        "tournaments":{
            "US Open": {
                "Seed": 1,
                "Finish": 3,
                "Wins": 5,
                "Losses": 2,
                "+/-": 23
            },
            "Select Flight Invite": {
                "Seed": 5,
                "Finish": 2,
                "Wins": 6,
                "Losses": 1,
                "+/-": 8
            },
            "Three Ring Rally": {
                "Seed": 1,
                "Finish": 1,
                "Wins": 7,
                "Losses": 0,
                "+/-": 37
            }
        }
    }

bmorgs bmorgs · Accepted Answer · 2020-11-30T02:54:25

Ok I figured out what I was doing wrong--it was a few things.

First, I needed to add an <div *ngIf='currTeam'> that wraps around the entire teams.component.html. That fixed all the errors I was seeing when loading the teams component.

The 2nd issue was due to how I had my .json file formatted. All I had to do was make the tournaments section an array rather that a nested dictionary. It now looks like:

"tournaments":[
            {
                "name": "US Open",
                "seed": 1,
                "finish": 3,
                "wins": 5,
                "losses": 2,
                "plus_minus": 23
            },
            {
                "name": "Select Flight Invite",
                "seed": 5,
                "finish": 2,
                "wins": 6,
                "losses": 1,
                "plus_minus": 8
            },
            {
                "name": "US Open",
                "seed": 1,
                "finish": 1,
                "wins": 7,
                "losses": 0,
                "plus_minus": 37
            }
        ]

and that did the trick!

Angular cannot find property of undefined

1 Answers