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 <a ng-click="sort_by('awayTeamName')"><i class="icon-sort"></i></a></th>
<th class="field3">homeTeam <a ng-click="sort_by('HomeTeam')"><i class="icon-sort"></i></a></th>
--> <th class="field3">Name <a ng-click="sort_by('Name')"><i class="icon-sort"></i></a></th>
<th class="line">Line <a ng-click="sort_by('line')"><i class="icon-sort"></i></a></th>
<th class="field3">Money Line <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>
We will learn to create and consume RESTful APIs in Angular application. To manage the data on the remote server, we make GET, POST, PUT and Delete using HttpClient API. We are required to import and setup HttpClient service in Angular project to consume REST APIs.
You can now access your component from the /news path. In this tutorial, we used Angular 8 to build a simple news application that retrieves data from a JSON REST API using the get () method of HttpClient.
If you want to create Apis or web services in PHP, Laravel and codeigniter, so you can click on the following urls: In this step, Create components and template like list page, create page, edit page and view page in angular crud app.
To work with HttpClient service in Angular, you need to import the HttpClientModule in app.module.ts file. Then inject HttpClient service in constructor method after that you can hit the remote server via HTTP’s POST, GET, PUT and DELETE methods. HttpClient API service is used to make communication between front-end web apps with backend services.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With