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
}
}
}