CODEWITHSUNDEEP
angularjsonpangular7
Francesco
Francesco

Reputation: 10830

JSONP call successful, but getting Error: JSONP injected script did not invoke callback

I am trying to make a JSONP call to the following API: https://api.openrates.io/latest

My service code:

this.http
    .jsonp<Response>("http://api.openrates.io/latest", "callback")
    .subscribe(res => console.warn(res));

From the DevTools Network Tab I can see that the request was successful and I am getting a JSON object back:

enter image description here

However I get the following exception and I cannot subscribe to the response properly:

enter image description here

Is it a problem in the way I make the JSONP call? Or is the server answer the issue (JSON and not a callback)? For sake of completeness I use Angular 7 and Angular CLI.

Upvotes: 2

Views: 1651

Answers (3)

Kent Aguilar
Kent Aguilar

Reputation: 5348

Temporarily, if you just need to test your API endpoints locally, you can just run a new session of Chrome where web security is disabled.

You can hit Window + R then execute this script.

chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security

Upvotes: 0

Sunil
Sunil

Reputation: 11243

Issue is with response type. Its pretty pure json type however jsonp format should looks like - 

/**/ng_jsonp_callback_7({,…});
has_more: false
items: [{new_active_users: 9, total_users: 9580180, badges_per_minute: 5.37, total_badges: 28924187,…}]
quota_max: 300
quota_remaining: 298

So instead of using jsonp you can use get method.

working copy is here https://stackblitz.com/edit/angular-http-jsonp-yd9z1r

Upvotes: 1

Suresh Kumar Ariya
Suresh Kumar Ariya

Reputation: 9764

May be, you should try calling .map with pipeable operator.

return this.http
    .jsonp<Response>("http://api.openrates.io/latest", "callback").pipe(
       map(res=>res),
       tap(res=>console.log(res))
    );

Also check JSON response is valid.

Upvotes: 0

Related Questions