使用ForkJoin访问时难以访问2 API的数据

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (62)

我试图在我的角度应用程序上访问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];
    });
  }
}


我试图从第一API获取name属性,从第二API获取EventID属性。

这是我的HTML代码。

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

在我得到的输出中

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

我可以使用此命令检索页面上的所有json数据

{{loadedCharacter | json}}

我应该做哪些更改,以便能够单独检索所有数据?

提问于
用户回答回答于

您应该像这样更改代码:

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。

请参阅stackblitz中的演示 - https://stackblitz.com/edit/angular-8npc19?file=app/button-overview-example.ts

用户回答回答于

结果[1]是请求返回的数组https://www.fantasylabs.com/api/sportevents/3/2019_06_17

另一方面,第一个的结果是只有一个属性“events”的对象,所以我认为你应该多考虑一下这个映射:

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

扫码关注云+社区

领取腾讯云代金券