Dynamic REST API call angular

Question

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 - https://drive.google.com/file/d/0B2HH3TWuI4Fdc3RfNGVocy1pT0tuSXlLdHlPMUZSRG5GTWJV/view. I am also confused about the contracts and getter, setter mentioned in the documentation. How and where should I use them?

Here is my code for accessing Name, Line and MoneyLine data from static json API - https://sportsbook.draftkings.com/api/odds/v1/leagues/3/offers/gamelines.json

How can I make use of the documentation and access live API data?

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  {
//allhomeTeamName;
//allawayTeamName;
allline;
allOdds;
allName;
all: Array<{line: string, name: string,oddsAmerican:string}> = [];
firstLinePerGame: Array<string>;
oddsAmericans: Array<string>;

  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) => re.events));
    const characterHomeworld = this.http.get('https://www.fantasylabs.com/api/sportevents/3/2019_06_17');

    this.firstLinePerGame = new Array<string>();
    //this.oddsAmericans = new Array<string>();

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

      //this.allhomeTeamName = draftkingsResp.map(r => r.homeTeamName);
      //this.allawayTeamName = draftkingsResp.map(r => r.awayTeamName);
      this.allName = draftkingsResp.map(r => r.name);
      this.allline = draftkingsResp.map(r=>r.offers).flat().map(r => r.outcomes).flat().map(o => o.line);
      this.allline = this.allline.filter(l => !!l);
      this.allOdds = draftkingsResp.map(r => r.offers).flat().map(r=>r.outcomes[0]).flat().map(o=>o.oddsAmerican);
      this.createAllArray();      


    });
  }

  createAllArray(): void {
    for (let i = 0; i < 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);
    }
  }
}

api.component.html code

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

        <!--   <th class="awayTeamName">awayTeamName&nbsp;<a ng-click="sort_by('awayTeamName')"><i class="icon-sort"></i></a></th>
          <th class="field3">homeTeam&nbsp;<a ng-click="sort_by('HomeTeam')"><i class="icon-sort"></i></a></th>
 -->           <th class="field3">Name&nbsp;<a ng-click="sort_by('Name')"><i class="icon-sort"></i></a></th>
            <th class="line">Line&nbsp;<a ng-click="sort_by('line')"><i class="icon-sort"></i></a></th>
             <th class="field3">Money Line&nbsp;<a ng-click="sort_by('oddsAmericans')"><i class="icon-sort"></i></a></th>
      </tr>
  </thead>

  <tbody>
    <ng-container *ngFor="let item of all| paginate: { itemsPerPage: 5, currentPage: p }; let i = index">
      <tr>
        <td>{{item.name }}</td>
<!--         <td>{{item.awayTeam}}</td>
        <td>{{item.homeTeam}} </td> -->
                <td>{{item.line }}</td>

        <td>{{item.oddsAmerican}}</td>

      </tr>
    </ng-container>
  </tbody>
</table> 


<pagination-controls (pageChange)="p = $event"></pagination-controls>

live api data means is it frequently changing server data? or some static server data? — Ahmad
– Ahmad, Commented Jul 6, 2019 at 17:17
what's the meaning of dynamic api ? push events you mean ? i do not understand the meaning — bubbles
– bubbles, Commented Jul 7, 2019 at 14:03
API data which keeps on changing eg Score of 2 teams playing Sports — Karan
– Karan, Commented Jul 7, 2019 at 14:07

Ashish Shah · Accepted Answer · 2019-07-06 19:31:02Z

2

+50

I have updated the code according to your requirement. I have made use of the observables to fetch the live data here in the link https://stackblitz.com/edit/stackoverflow-24-06-2019-ewzpst?file=src/app/app.component.html

answered Jul 6, 2019 at 19:31

Ashish Shah

1,1321 gold badge7 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Karan Over a year ago

Did you have to create deeplink as stated in the document?

Ace Zhang · Accepted Answer · 2019-07-03 19:52:23Z

0

Dynamic URLs can be generated via this syntax:

//goes right below the imports
const httpJSON = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json'})
};

//code below goes inside the component class
private getUrl = 'http://localhost:8080/arenamaster-backend/api/tournaments/profile';

constructor(private http: HttpClient) {
}

getTournament(id: string): Observable<YourObject>{
  const url = `${this.getUrl}/${id}`;
    //console.log(url);
    return this.http.get<YourObject>(url, httpJSON);
}

YourObject should be a class that has fields corresponding to the JSON data you expect to receive. IE if a field in the incoming JSON data is named "odds" and holds a string you should have a field in your class labeled "odds" and initialize it with an empty string.

answered Jul 3, 2019 at 19:52

Ace Zhang

911 silver badge9 bronze badges

4 Comments

Karan Over a year ago

Can we work here - stackblitz.com/edit/stackoverflow-24-06-2019-2diykz?file=src/… . I am getting errors

Ace Zhang Over a year ago

You are adapting my example too literally. It should be a loose guide to how you should structure your code. In your case you would grab the ID from the URL or from an input field and then submit it to a service, which then combines it with the base service URL and then uses it to perform a GET request to your target service.

Ace Zhang Over a year ago

stackblitz.com/edit/stackoverflow-24-06-2019-crdsxv This is the full suite of code copied over from my tournament profile component, but it does not work properly as my project is a full-stack project and you will be missing the backend and the database.

Karan Over a year ago

Okay, I do not need to store the data. I just need to access the live API data

Ahmad · Accepted Answer · 2019-07-06 20:16:01Z

0

TRY:-

   import { Subscription, timer, pipe } from 'rjxs';
import { switchMap } from 'rxjs/operators';

subscription: Subscription;
statusText: string;

ngOnInit() {
    this.subscription = timer(0, 10000).pipe(
      switchMap(() => this.myservice.getdata())
    ).subscribe(result => this.serverData= result);
}

ngOnDestroy() {
    this.subscription.unsubscribe();
}

.html

//play with `this.serverData`

answered Jul 6, 2019 at 20:16

Ahmad

3,9266 gold badges41 silver badges79 bronze badges

1 Comment

Karan Over a year ago

Something like this? - stackblitz.com/edit/stackoverflow-24-06-2019-pqyfhv?file=src/…

Collectives™ on Stack Overflow

Dynamic REST API call angular

3 Answers 3

1 Comment

4 Comments

TRY:-

.html

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

TRY:-

.html

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related