Начало работы с Angular 9 и MySportsFeeds
Это для любителей спортивной статистики, пытающихся создать что-то с новейшим фреймворком angular. Эта статья покажет вам, как начать использовать Angular 9 с API MySportsFeeds.
Я получу список игроков НБА, отфильтрую ответ и отсортирую игроков НБА с наибольшим количеством очков.
Ты выучишь
- Сделайте запрос API с помощью модуля HttpClient.
- Отфильтровать ответ API
- Отобразить данные
Сначала вам нужно будет предоставить доступ к конечным точкам MySportsFeeds. Как разработчик, работающий над некоммерческим приложением за сниженную ежемесячную плату, вы можете получить доступ к их конечным точкам. Сообщите MSF, что вы работаете над некоммерческим проектом, и они отправят вам токен API. Зарегистрируйтесь на MySportsFeeds и используйте токен API в запросе заголовка для аутентификации запроса на получение API. let headers = new HttpHeaders().set("Authorization", "Basic " + btoa(apiToken + ":" + 'MYSPORTSFEEDS'));
Первое, что я хочу сделать в этом приложении, это получить список всех активных игроков НБА и их статистику текущего сезона. Я использовал Документацию API MySportsFeeds, чтобы найти правильную конечную точку для получения статистики игроков НБА за 2019–2020 годы. Я могу использовать модуль Angular HttpClient для отправки запроса GET для данных, используя эту конечную точку https://api.mysportsfeeds.com/v2.1/pull/nba/2019-2020-regular/player_stats_totals.json?position=PG,SG,SF,PF,C
, найденную в документации API.
Этот запрос API отправит 718 элементов, что является довольно большой полезной нагрузкой, особенно для пользовательского интерфейса. Я отфильтрую ответ с помощью javascript, чтобы у меня были только относительные игроки NBA, прежде чем я определю массив для пользовательского интерфейса. Я могу использовать атрибут данных gamesPlayed
для удаления ненужных игроков из массива.
//app.component.ts import { Component, OnInit } from '@angular/core'; import { HttpClient, HttpResponse, HttpHeaders, HttpRequest} from '@angular/common/http'; let headers = new HttpHeaders().set("Authorization", "Basic " + btoa(apiToken + ":" + 'MYSPORTSFEEDS')); let url = 'https://api.mysportsfeeds.com/v2.1/pull/nba/2019-2020-regular/player_stats_totals.json?position=PG,SG,SF,PF,C'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { public nbaData: Array<any>; constructor(private http: Http) {} loadData() { this.http.get(url, {headers}) .subscribe(res => { console.log(res['playerStatsTotals'], 'NBA players and stats'); this.nbaData = res['playerStatsTotals'].filter( player => player.stats != null && player.stats.gamesPlayed > 5); }); } ngOnInit() { loadData(); } } //app.component.html <div class="card" *ngIf="nbaData != null"> <h2>Points</h2> <div *ngFor="let item of nbaData"> <img src="{{item?.player?.officialImageSrc}}" alt="basketball player"> {{ item.player.firstName + ' ' + item.player.lastName}} - {{item?.player?.primaryPosition}} | #{{item.player.jerseyNumber}} {{item?.stats?.offense?.pts}} Pts </div> </div> //app.component.scss .card { width: 33%; margin: 20px; padding: 20px; box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); }
Это даст очень длинный список игроков и их общее количество очков за сезон. Я показываю свой список игроков внутри простой карточки. Я добавил Часть 2 этого урока, и я отсортирую список от большего количества точек к меньшему, и я настрою простую разбивку на страницы, чтобы список было легче читать.