Angular HTTP GET request not working as expected

Question

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.

@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? — Amos, Nov 30 '17 at 13:02
I think this is your problem - https://github.com/bobbymond/FantasyPremierLeagueAPI/issues/4 - if you check the console you will see you have a CORS error — Michael Doye, Nov 30 '17 at 13:14
@PranayRana you can simply click `Fork` on the Stackblitz link I provided. From there it compiles automatically. — Amos, Nov 30 '17 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 — Pranay Rana, Nov 30 '17 at 13:58

Pranay Rana · Answer 1 · 2017-11-30T13:58:13.110

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();
        });;
  }
}

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). — Amos, Nov 30 '17 at 14:18
@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 .. — Pranay Rana, Nov 30 '17 at 15:36
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). — Amos, Dec 01 '17 at 23:22

score 0 · Answer 2 · answered Nov 30 '17 at 13:07

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);

answered Nov 30 '17 at 13:07

ВІТАЛІЙ Маковейчук

316
1
8

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. – Amos Nov 30 '17 at 13:09
Actually it is a problem with CORS . Try something like this : https://stackoverflow.com/questions/36768418/how-to-make-cors-enabled-http-requests-in-angular-2 Also, there is a Chrome extension which allows you to bypass this problem: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi – ВІТАЛІЙ Маковейчук Nov 30 '17 at 13:14
I just posted a screenshot of my console in the comment above. – Amos Nov 30 '17 at 13:16
1

Try something like this : https://stackoverflow.com/questions/36768418/how-to-make-cors-enabled-http-requests-in-angular-2 Also, there is a Chrome extension which allows you to bypass this problem: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi – ВІТАЛІЙ Маковейчук Nov 30 '17 at 13:17

score -1 · Answer 3 · answered Nov 30 '17 at 13:05

-1

use subscribe() for this

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

answered Nov 30 '17 at 13:05

Abdul Rafay

787
6
21

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. – Amos Nov 30 '17 at 13:09

Angular HTTP GET request not working as expected

3 Answers3