Трудность доступа к данным 2 API. Использование ForkJoin для доступа - PullRequest
Новая
       41

Трудность доступа к данным 2 API. Использование ForkJoin для доступа

0 голосов
/ 18 июня 2019

Я пытаюсь получить доступ к 2 API на моем угловом приложении

  1. https://sportsbook.draftkings.com/api/odds/v1/leagues/3/offers/gamelines.json

  2. https://www.fantasylabs.com/api/sportevents/3/2019_06_17

Я использую forkjoin для асинхронного доступа к данным обоих данных

Вот мой код для api.component.ts 


import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, forkJoin } from 'rxjs';

@Component({
  selector: 'app-mlb-api',
  templateUrl: './mlb-api.component.html',
  styleUrls: ['./mlb-api.component.css']
})
export class MlbApiComponent  {

loadedCharacter: {};
  constructor(private http: HttpClient) { }

  ngOnInit() {
    let character = this.http.get('https://sportsbook.draftkings.com/api/odds/v1/leagues/3/offers/gamelines.json');
    let characterHomeworld = this.http.get('https://www.fantasylabs.com/api/sportevents/3/2019_06_17');

    forkJoin([character, characterHomeworld]).subscribe(results => {

      (results[0] as any).name = results[1];
      this.loadedCharacter = results[0];
    });
  }
}

Я пытаюсь получить свойство name из первого API и свойство EventID из2-й API.

Вот мой HTML-код. 

   <td>{{loadedCharacter.name}}</td>
    <td>{{loadedCharacter.EventId}}</td>

В выводе я получаю 

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Я могу получить все данные JSON на странице, используяэта команда 

{{loadedCharacter | json}}

Какие изменения я должен внести, чтобы иметь возможность получать все данные по отдельности?

Ответы [ 2 ]

1 голос
/ 19 июня 2019

Вы должны изменить свой код следующим образом:

У loadCharcters вот так: 

loadedCharacter: {name: string, eventId: string} = <{name: string, eventId: string}>{};

ngOnInit() {
    let character = this.http.get('https://sportsbook.draftkings.com/api/odds/v1/leagues/3/offers/gamelines.json')
    .pipe(map((re: any) => re.events));
    let characterHomeworld = this.http.get('https://www.fantasylabs.com/api/sportevents/3/2019_06_17');

    forkJoin([character, characterHomeworld]).subscribe(results => {

      this.loadedCharacter.name = results[0][0].name;
      this.loadedCharacter.EventId = results[1][0].EventId;
      console.log(results[0][0].name);
    });
  }

<td>{{loadedCharacter.name}}</td>
<td>{{loadedCharacter.EventId}}</td>

Я обновил стек стека.

См. Демонстрацию в stackblitz - https://stackblitz.com/edit/angular-8npc19?file=app/button-overview-example.ts

0 голосов
/ 19 июня 2019

Результатом [1] является массив, возвращаемый запросом к https://www.fantasylabs.com/api/sportevents/3/2019_06_17

С другой стороны, результатом первого является объект только с одним свойством "events", поэтому я думаю, что вам следует подумать немного больше об этом отображении: 

...
      (results[0] as any).name = results[1];
      this.loadedCharacter = results[0];
...
...