Obtaining JSON Data from API using Angular 2 Http and the finance_charts_json_callback() Callback

Question

Having trouble retrieving JSON data from this API: I'm unsure how to access the returned finance_charts_json_callback().

Currently, I am utilizing Angular 2's http.get():

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

However, an error is triggered at => res.json(), displaying:

EXCEPTION: SyntaxError: Unexpected token i

Answer 1

Answer №1

If you find yourself in this situation, make sure to utilize JSONP with the callback name set as JSONP_CALLBACK:

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

The url variable must be set to

http://chartapi.finance.yahoo.com/instrument/1.0/NFLX/chartdata;type=quote;range=1d/json/?callback=JSONP_CALLBACK

, pay attention to the callback=JSONP_CALLBACK section.

Additionally, don't forget to initialize the app with

bootstrap(App, [JSONP_PROVIDERS])

and import the Jsonp service from the angular2/http module.

Answer 2

If you find yourself in this situation, make sure to utilize JSONP with the callback name set as JSONP_CALLBACK:

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

The url variable must be set to

http://chartapi.finance.yahoo.com/instrument/1.0/NFLX/chartdata;type=quote;range=1d/json/?callback=JSONP_CALLBACK

, pay attention to the callback=JSONP_CALLBACK section.

Additionally, don't forget to initialize the app with

bootstrap(App, [JSONP_PROVIDERS])

and import the Jsonp service from the angular2/http module.