Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dynamic REST API call angular

Tags:

angular

api

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>
like image 297
Karan Avatar asked Jun 27 '19 18:06

Karan


People also ask

How to create and consume RESTful APIs in angular?

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.

How to retrieve data from JSON REST API in Angular 8?

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.

How to create APIs or web services in angular in PHP?

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.

How to work with httpclient service in angular?

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.


1 Answers

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

like image 172
Ashish Shah Avatar answered Sep 30 '22 10:09

Ashish Shah