Angular 2 Http – How to Get JSON Data from API with finance_charts_json_callback() callback

Question

I'm trying to get json data from this api: http://chartapi.finance.yahoo.com/instrument/1.0/NFLX/chartdata;type=quote;range=1d/json And I don't know how to get into the returned finance_charts_json_callback().

I'm using Angular 2's http.get():

loadData() {
  return this.http
     .get(this.url)
     .map((res) => res.json())
     .subscribe((data) => console.log(data));
}

When it gets to => res.json(), it throws this error:

EXCEPTION: SyntaxError: Unexpected token i

if you log out the res object without calling the .json method on it what is returned? — inoabrian
– inoabrian, Commented Feb 5, 2016 at 22:12
the response you are getting is not json, is something called jsonp, try to use use this instead: angular.io/docs/js/latest/api/http/Jsonp-class.html, an example here: stackoverflow.com/questions/33675842/… — Langley
– Langley, Commented Feb 5, 2016 at 22:55

dfsq · Accepted Answer · 2016-02-05 23:15:53Z

6

You need to use JSONP in this case with callback name JSONP_CALLBACK:

loadData() {
    this.jsonp.get(this.url)
        .map(res => res.json())
        .subscribe(data => console.log(data));
}

Where url should be http://chartapi.finance.yahoo.com/instrument/1.0/NFLX/chartdata;type=quote;range=1d/json/?callback=JSONP_CALLBACK, note callback=JSONP_CALLBACK part.

And of course, remember to bootstrap the app with bootstrap(App, [JSONP_PROVIDERS]) and import Jsonp service from angular2/http module.

answered Feb 5, 2016 at 23:15

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

4 Comments

Langley Over a year ago

is not JSONP_CALLBACK in the url he's trying to get is finance_charts_json_callback

Pardeep Jain Over a year ago

may i know what is JSONP i heared about JSON, JSONP term is new for me !

dfsq Over a year ago

@Langley No, finance_charts_json_callback is a default wrapper callback used by API if you don't specify real one. For Angular machinery it is required response to be wrapped into JSONP_CALLBACK.

dfsq Over a year ago

@PardeepJain Take a look at this thread, nice explanations.

Collectives™ on Stack Overflow

Angular 2 Http – How to Get JSON Data from API with finance_charts_json_callback() callback

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related