title: Dynamic REST API call angular
body: <p>I have been successful in accessing static API data on the page. I am now trying to access dynami API. I have read some documentation to access the dynamic API, but the documentation by API provider is different from online resources. I am not sure what changes I have to make in existing code to access dynamic API data. Here is the link from API provider - <a href="https://drive.google.com/file/d/0B2HH3TWuI4Fdc3RfNGVocy1pT0tuSXlLdHlPMUZSRG5GTWJV/view" rel="noreferrer">https://drive.google.com/file/d/0B2HH3TWuI4Fdc3RfNGVocy1pT0tuSXlLdHlPMUZSRG5GTWJV/view</a>. I am also confused about the <code>contracts</code> and <code>getter</code>, <code>setter</code> mentioned in the documentation. How and where should I use them? </p>
  
  <p>Here is my code for accessing <code>Name</code>, <code>Line</code> and <code>MoneyLine</code> data from static json API - <a href="https://sportsbook.draftkings.com/api/odds/v1/leagues/3/offers/gamelines.json" rel="noreferrer">https://sportsbook.draftkings.com/api/odds/v1/leagues/3/offers/gamelines.json</a></p>
  
  <p>How can I make use of the documentation and access live API data?</p>
  
  <p>api.component.ts code</p>
  
  <pre><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  {
  //allhomeTeamName;
  //allawayTeamName;
  allline;
  allOdds;
  allName;
  all: Array&lt;{line: string, name: string,oddsAmerican:string}&gt; = [];
  firstLinePerGame: Array&lt;string&gt;;
  oddsAmericans: Array&lt;string&gt;;
  
    constructor(private http: HttpClient) {}
  
    ngOnInit() {
  
      const character = this.http.get('https://sportsbook.draftkings.com/api/odds/v1/leagues/3/offers/gamelines.json').pipe(map((re: any) =&gt; re.events));
      const characterHomeworld = this.http.get('https://www.fantasylabs.com/api/sportevents/3/2019_06_17');
  
      this.firstLinePerGame = new Array&lt;string&gt;();
      //this.oddsAmericans = new Array&lt;string&gt;();
  
      forkJoin([character, characterHomeworld]).subscribe(([draftkingsResp, fantasylabsResp]) =&gt; {      
  
        //this.allhomeTeamName = draftkingsResp.map(r =&gt; r.homeTeamName);
        //this.allawayTeamName = draftkingsResp.map(r =&gt; r.awayTeamName);
        this.allName = draftkingsResp.map(r =&gt; r.name);
        this.allline = draftkingsResp.map(r=&gt;r.offers).flat().map(r =&gt; r.outcomes).flat().map(o =&gt; o.line);
        this.allline = this.allline.filter(l =&gt; !!l);
        this.allOdds = draftkingsResp.map(r =&gt; r.offers).flat().map(r=&gt;r.outcomes[0]).flat().map(o=&gt;o.oddsAmerican);
        this.createAllArray();      
  
  
      });
    }
  
    createAllArray(): void {
      for (let i = 0; i &lt; this.allline.length; i++) {
        let item = {
          line: this.allline[i],
          //awayTeam: this.allawayTeamName[i],
          //homeTeam: this.allhomeTeamName[i],
          name:this.allName[i],
          oddsAmerican: this.allOdds[i]
        }
        this.all.push(item);
      }
    }
  }
  </code></pre>
  
  <p>api.component.html code</p>
  
  <pre><code>&lt;table class="table table-striped table-condensed table-hover"&gt;
    &lt;thead&gt;
        &lt;tr&gt;
  
          &lt;!--   &lt;th class="awayTeamName"&gt;awayTeamName&amp;nbsp;&lt;a ng-click="sort_by('awayTeamName')"&gt;&lt;i class="icon-sort"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/th&gt;
            &lt;th class="field3"&gt;homeTeam&amp;nbsp;&lt;a ng-click="sort_by('HomeTeam')"&gt;&lt;i class="icon-sort"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/th&gt;
   --&gt;           &lt;th class="field3"&gt;Name&amp;nbsp;&lt;a ng-click="sort_by('Name')"&gt;&lt;i class="icon-sort"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/th&gt;
              &lt;th class="line"&gt;Line&amp;nbsp;&lt;a ng-click="sort_by('line')"&gt;&lt;i class="icon-sort"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/th&gt;
               &lt;th class="field3"&gt;Money Line&amp;nbsp;&lt;a ng-click="sort_by('oddsAmericans')"&gt;&lt;i class="icon-sort"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
  
    &lt;tbody&gt;
      &lt;ng-container *ngFor="let item of all| paginate: { itemsPerPage: 5, currentPage: p }; let i = index"&gt;
        &lt;tr&gt;
          &lt;td&gt;{{item.name }}&lt;/td&gt;
  &lt;!--         &lt;td&gt;{{item.awayTeam}}&lt;/td&gt;
          &lt;td&gt;{{item.homeTeam}} &lt;/td&gt; --&gt;
                  &lt;td&gt;{{item.line }}&lt;/td&gt;
  
          &lt;td&gt;{{item.oddsAmerican}}&lt;/td&gt;
  
        &lt;/tr&gt;
      &lt;/ng-container&gt;
    &lt;/tbody&gt;
  &lt;/table&gt; 
  
  
  &lt;pagination-controls (pageChange)="p = $event"&gt;&lt;/pagination-controls&gt;
  </code></pre>