As a beginner in Ionic and Angular, I am attempting to call an API and then showcase the team names within the template of my project. Despite following numerous tutorials and videos, I seem to be stuck as the JSON response returns an object with results followed by an array of teams. I am unsure how to proceed from here.
data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Team } from './team.model';
@Injectable({
providedIn: 'root'
})
export class DataService {
url = 'https://api-football-v1.p.rapidapi.com/v2/';
auth_key = 'mrwFzF28himsh2UeUlVuf9IwWoqVp1phIUGjsn8OlRdlgNiqNe';
constructor(private _http: HttpClient) { }
getTeams(){
const headers = new HttpHeaders()
.set('X-RapidAPI-Key', this.auth_key);
return this._http.get<Team[]>(this.url + '/teams/league/1264/teams', {headers})
}
}
team.model.ts
export class Team {
team_id: string;
name:string;
code:string;
logo: string;
country: string;
is_national: string;
founded: string;
venue_name: string;
venue_surface: string;
venue_address: string;
venue_city: string;
venue_capacity: string;
}
tab1.page.ts
import { Component, OnInit } from '@angular/core';
import { Team } from '../team.model';
import {DataService } from '../data.service';
@Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})
export class Tab1Page implements OnInit {
url = 'https://api-football-v1.p.rapidapi.com/v2/';
auth_key = 'mrwFzF28himsh2UeUlVuf9IwWoqVp1phIUGjsn8OlRdlgNiqNe';
teams$: Team[];
constructor(private dataService: DataService) {
}
ngOnInit() {
return this.dataService.getTeams()
.subscribe(data => this.teams$ = data);
}
}
tab1.page.html
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Tab 1
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Tab 1</ion-title>
</ion-toolbar>
</ion-header>
<div *ngFor='let team of teams$'>
<<h2>{{team.name}}<h2>
</div>
</ion-content>
JSON Response
{
"api":{
"results":26,
"teams":[
...
]
}
}