Accessing data from 2 API simultaneously using ForkJoin : Not Defined error

问题

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?

回答1:

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

来源：https://stackoverflow.com/questions/56672586/accessing-data-from-2-api-simultaneously-using-forkjoin-not-defined-error