Начало работы с 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 этого урока, и я отсортирую список от большего количества точек к меньшему, и я настрою простую разбивку на страницы, чтобы список было легче читать.