3

I am trying to get information from the following url: https://fantasy.premierleague.com/drf/entry/2241/event/14/picks. Pasting this in a browser shows the actual data that I expected to get when using a HTTP GET request in Angular

{"active_chip":"","automatic_subs":[{"id":54265617,"element_in":367,"element_out":264,"entry":2241,"event":14}],"entry_history":{"id":65471706,"movement":"new","points":51,"total_points":948,"rank":2041408,"rank_sort":2041432,"overall_rank":1,"targets":null,"event_transfers":1,"event_transfers_cost":0,"value":1030,"points_on_bench":-1,"bank":12,"entry":2241,"event":14},"event":{"id":14,"name":"Gameweek 14","deadline_time":"2017-11-28T18:45:00Z","average_entry_score":14,"finished":false,"data_checked":false,"highest_scoring_entry":5368938,"deadline_time_epoch":1511894700,"deadline_time_game_offset":0,"deadline_time_formatted":"28 Nov 18:45","highest_score":76,"is_previous":false,"is_current":true,"is_next":false},"picks":[{"element":260,"position":1,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":100,"position":2,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":34,"position":3,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":13,"position":4,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":367,"position":5,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":501,"position":6,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":234,"position":7,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":104,"position":8,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":108,"position":9,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":472,"position":10,"is_captain":false,"is_vice_captain":true,"multiplier":1},{"element":394,"position":11,"is_captain":true,"is_vice_captain":false,"multiplier":2},{"element":286,"position":12,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":264,"position":13,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":405,"position":14,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":548,"position":15,"is_captain":false,"is_vice_captain":false,"multiplier":1}]}

however, I get the following instead:

{ "_isScalar": false, "source": { "_isScalar": false, "source": { "_isScalar": false, "source": { "_isScalar": true, "value": { "url": "https://fantasy.premierleague.com/drf/entry/2241/event/14/picks", "body": null, "reportProgress": false, "withCredentials": false, "responseType": "json", "method": "GET", "headers": { "normalizedNames": {}, "lazyUpdate": null, "headers": {} }, "params": { "updates": null, "cloneFrom": null, "encoder": {}, "map": null }, "urlWithParams": "https://fantasy.premierleague.com/drf/entry/2241/event/14/picks" }, "scheduler": null }, "operator": { "concurrent": 1 } }, "operator": {} }, "operator": {} }

An example showing my problem: https://stackblitz.com/edit/http-basics-zvqfxs

EDIT: apparently it was a CORS problem and installing this extension fixed it for me.

Improve this question
5
  • @PranayRana when I paste the URL in the browser I get the correct response, also when using requests in Python I get the correct response, why do I not get the correct response using Angular? Commented Nov 30, 2017 at 13:02
  • I think this is your problem - github.com/bobbymond/FantasyPremierLeagueAPI/issues/4 - if you check the console you will see you have a CORS error Commented Nov 30, 2017 at 13:14
  • hi how to run code in stackblitz Commented Nov 30, 2017 at 13:43
  • @PranayRana you can simply click Fork on the Stackblitz link I provided. From there it compiles automatically. Commented Nov 30, 2017 at 13:46
  • Hi, Updated my answer have look , things are working at my end when i tried creating local service ...you need to do changes as i suggested and you are ready to go Commented Nov 30, 2017 at 13:58

3 Answers 3

Reset to default
2

Done code as below and its working for me in my local computer when i setup rest service which returns me data , But it failing at https://http-basics-zvqfxs.stackblitz.io/ web site because you are performing cross domain request, and giving error 

XMLHttpRequest cannot load 
https://fantasy.premierleague.com/drf/entry/2241/event/14/picks. No 'Access-
Control-Allow-Origin' header is present on the requested resource. Origin 
'https://http-basics-zvqfxs.stackblitz.io' is therefore not allowed access.

to resolve above error your back end rest service need to be modified , it should allow cross domain request .

Working code in local machine (angular code is already setup for cross domain request)

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Http, Headers, RequestOptions, Response, ResponseContentType } from '@angular/http';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  readonly ROOT_URL = 'https://fantasy.premierleague.com/drf/entry/2241/event/14/picks';

  players: string;

  constructor(private http: Http) { }

  getPlayers() {
      let headers = new Headers({
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Credentials': 'true'
        });
        let options = new RequestOptions({ headers: headers });

       this.http.get('https://fantasy.premierleague.com/drf/entry/2241/event/14/picks',options)
          .map((res)=> res.json() )
          .subscribe((data) => {
            this.players =   data.json();
        });;
  }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I already fixed it, but I appreciate your effort. I would note a few things: Http is deprecated, so I'm using HttpClient so I haven't tried getting your solution to work. You should also use const instead of let and import map from 'rxjs/add/operator/map' (just for if someone uses your solution in the future).
@Esoemah - 0k seems like i am working with lower version ...i will keep note of your point ...Fix your programm by changing it will work for you ..
I already upvoted, but I will only accept the answer if it uses the up to date method of doing it (Http, Headers etc. are all deprecated, it's not HttpClient and HttpHeaders for example).
0

According to your example, the problem is you are using Observable without subscribing to it. You should modify your getPlayers method to look like this:

this.http.get(this.ROOT_URL).subscribe(res=>this.players=res);

Improve this answer

4 Comments

I already tried this long before posting this, and if you actually tried this yourself, you would've seen that this also does not work.
Actually it is a problem with CORS . Try something like this : stackoverflow.com/questions/36768418/… Also, there is a Chrome extension which allows you to bypass this problem: chrome.google.com/webstore/detail/allow-control-allow-origi/…
I just posted a screenshot of my console in the comment above.
Try something like this : stackoverflow.com/questions/36768418/… Also, there is a Chrome extension which allows you to bypass this problem: chrome.google.com/webstore/detail/allow-control-allow-origi/…
-1

use subscribe() for this

getPlayers() {
   this.http.get(this.ROOT_URL).subscribe(data => {
      console.log(data);
      //this.players = data;
   });
}
Improve this answer

1 Comment

I already tried this long before posting this, and if you actually tried this yourself, you would've seen that this also does not work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.