使用 ForkJoin 同时访问来自 2 个 API 的数据:未定义错误 [英] Accessing data from 2 API simultaneously using ForkJoin : Not Defined error

问题描述

使用 ForkJoin 我试图从 2 API 访问数据

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

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

我正在使用 forkjoin 异步访问两个数据的数据.我能够成功访问 homeTeamName、awayTeamName，但是在访问线路时出现错误

core.js:1521 ERROR ReferenceError: allline is not defined

api.component.html

<预><代码><table class="table table-striped table-condensed table-hover"><div class="容器"><div class="row"><div class="col-xs-4"><div class="table-responsive"><table summary="这张表格展示了如何使用 Bootstrap 的默认功能创建响应式表格" class="table table-bordered table-hover"><头><tr><th>信息</th><th>HomeTeam vs AwayTeam</th><th>Line</th></tr></thead><tr><td>姓名</td><div class="容器"><div class="row"><ng-container *ngFor="let n of allhomeTeamName"><tr><td>{{n}}</td></tr></ng-容器></tbody><tr><div class="容器"><div class="row"><ng-container *ngFor="let n of allawayTeamName"><tr><td>{{n}}</td></tr></ng-容器></tbody>

<div class="容器"><div class="row"><ng-container *ngFor="let n of allline"><tr><td>{{n}}</td></tr></ng-容器></tbody>

api.component.ts 代码

import {Component} from '@angular/core';从@angular/common/http"导入 {HttpClient}从 'rxjs' 导入 {forkJoin}；从 'rxjs/operators' 导入 {map}；@成分({选择器:'app-mlb-api'，templateUrl: './mlb-api.component.html',styleUrls: ['./mlb-api.component.css']})导出类 MlbApiComponent {loadedCharacter: { homeTeamName:string, awayTeamName:string, line:string, EventId:string,visitorTeam:string,homeTeam:string} = <{homeTeamName:string, awayTeamName:string, line:string, EventId:string,visitorTeam:string,homeTeam:string}>{};allhomeTeamName;allawayTeamName;全线；构造函数(私有 http:HttpClient){}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 => {//(results[0] as any).name = results[1];//this.loadedCharacter.name = results[0].name;this.loadedCharacter.homeTeamName = results[0].homeTeamName;this.loadedCharacter.awayTeamName = results[0].awayTeamName;this.loadedCharacter.line = results[0][0].offers[0].outcomes[0].line;//this.loadedCharacter.line = results[1][0].VisitorTeam;//this.loadedCharacter.line = results[1][0].HomeTeam;//this.loadedCharacter.EventId = results[1][0].EventId[1];this.allNames = results[0].map(r => r.name);console.log(this.allNames);this.allhomeTeamName = results[0].map(r => r.homeTeamName);console.log(this.allhomeTeamName);this.allawayTeamName = results[0].map(r => r.awayTeamName);console.log(this.allawayTeamName);this.allline = results[0].map(r=>r.offers).flat().map(r => r.outcomes).flat().map(o => o.line);控制台日志(全线)；this.allEventId = results[1].map(r => r.EventId);控制台日志(结果[1][0])；this.allvisitorTeam = results[0].map(r => r.VisitorTeam);console.log(this.allvisitorTeam);this.allawayTeam = results[0].map(r => r.AwayTeam);console.log(this.allawayTeam);});}}

我该如何解决这个错误?

解决方案

你的代码可以这样 -

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(([draftkingsResp, FantasylabsResp]) => {this.allNames = DraftkingsResp.map(r => r.name);//console.log(this.allNames);this.allhomeTeamName = DraftkingsResp.map(r => r.homeTeamName);//console.log(this.allhomeTeamName);this.allawayTeamName = DraftkingsResp.map(r => r.awayTeamName);//console.log(this.allawayTeamName);this.alllabel = DraftkingsResp.map(r => r.offers).flat().map(o => o.label);//console.log(this.alllabel);this.allline = DraftkingsResp.map(r=>r.offers).flat().map(r => r.outcomes).flat().map(o => o.line);console.log(this.allline);//this.allline 也会有 'undefined'//如果你愿意，那么你可以过滤this.allline = this.allline.filter(l => !!l);console.log(this.allline);});}

查看 stackblitz - https://stackblitz.com/edit/angular-8npc19?file=app%2Fbutton-overview-example.ts

Using ForkJoin I am trying to access data from 2 API

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

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

I am using forkjoin to access data of both data asynchronously. I am able to access homeTeamName, awayTeamName successfully, but while access lines i am getting error

core.js:1521 ERROR ReferenceError: allline is not defined

api.component.html

<table class="table table-striped table-condensed table-hover">




<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="table-responsive">
        <table summary="This table shows how to create responsive tables using Bootstrap's default functionality" class="table table-bordered table-hover">

          <thead>
            <tr>
              <th>Information</th>
              <th>HomeTeam vs AwayTeam</th>
              <th>Line</th>


            </tr>
          </thead>

          <tbody>
            <tr>
              <td>Name</td>
              <div class="container">
                <div class="row">

                  <ng-container *ngFor="let n of allhomeTeamName">
                    <tr><td>{{n}}</td></tr>
                  </ng-container>


                </tbody>

                <tbody>
            <tr>

              <div class="container">
                <div class="row">

                  <ng-container *ngFor="let n of allawayTeamName">
                    <tr><td>{{n}}</td></tr>
                  </ng-container>


                </tbody>



                </div>
              </div>

              <div class="container">
                <div class="row">

                  <ng-container *ngFor="let n of allline">
                    <tr><td>{{n}}</td></tr>
                  </ng-container>


                </tbody>



                </div>
              </div>

api.component.ts code

import {Component} from '@angular/core';
import {HttpClient} from '@angular/common/http'
import {forkJoin} from 'rxjs';
import {map} from 'rxjs/operators';

@Component({
  selector: 'app-mlb-api',
  templateUrl: './mlb-api.component.html',
  styleUrls: ['./mlb-api.component.css']
})
export class MlbApiComponent  {
 loadedCharacter: {  homeTeamName:string, awayTeamName:string, line:string, EventId:string, visitorTeam:string,homeTeam:string} = <{homeTeamName:string, awayTeamName:string, line:string, EventId:string, visitorTeam:string,homeTeam:string}>{};
    allhomeTeamName;
  allawayTeamName;
  allline;
  constructor(private http: HttpClient) {

  }

  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 => {

      //(results[0] as any).name = results[1];
      //this.loadedCharacter.name = results[0].name;
      this.loadedCharacter.homeTeamName = results[0].homeTeamName;
      this.loadedCharacter.awayTeamName = results[0].awayTeamName;
     this.loadedCharacter.line = results[0][0].offers[0].outcomes[0].line;
     //this.loadedCharacter.line = results[1][0].VisitorTeam;
     //this.loadedCharacter.line = results[1][0].HomeTeam;

      //this.loadedCharacter.EventId = results[1][0].EventId[1];

      this.allNames = results[0].map(r => r.name);
      console.log(this.allNames);

      this.allhomeTeamName = results[0].map(r => r.homeTeamName);
      console.log(this.allhomeTeamName);

       this.allawayTeamName = results[0].map(r => r.awayTeamName);
      console.log(this.allawayTeamName);

       this.allline = results[0].map(r=>r.offers).flat().map(r => r.outcomes).flat().map(o => o.line);
       console.log(allline);




       this.allEventId = results[1].map(r => r.EventId);
      console.log(results[1][0]);

      this.allvisitorTeam = results[0].map(r => r.VisitorTeam);
      console.log(this.allvisitorTeam);

      this.allawayTeam = results[0].map(r => r.AwayTeam);
      console.log( this.allawayTeam);

    });
  }
}

How can I resolve this error?

解决方案

You can have your code like this -

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(([draftkingsResp, fantasylabsResp]) => {      

      this.allNames = draftkingsResp.map(r => r.name);
      //console.log(this.allNames);

      this.allhomeTeamName = draftkingsResp.map(r => r.homeTeamName);
      //console.log(this.allhomeTeamName);

       this.allawayTeamName = draftkingsResp.map(r => r.awayTeamName);
      //console.log(this.allawayTeamName);

       this.alllabel = draftkingsResp.map(r => r.offers).flat().map(o => o.label);
      //console.log(this.alllabel);

      this.allline = draftkingsResp.map(r=>r.offers).flat().map(r => r.outcomes).flat().map(o => o.line);
       console.log(this.allline);
      //this.allline will have 'undefined' as well
      //if you want then you can filter
      this.allline = this.allline.filter(l => !!l);
      console.log(this.allline);
    });
  }

See the stackblitz - https://stackblitz.com/edit/angular-8npc19?file=app%2Fbutton-overview-example.ts

这篇关于使用 ForkJoin 同时访问来自 2 个 API 的数据:未定义错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！