JSONP callback issue with Angular 4

Question

I want to use flickr Jsonp along with Angular 4 to be able to retrieve images.

It gives me the following errors:-

VM637 global-functions.helpers.ts!transpiled:12 Response {_body: "JSONP injected script did not invoke callback.", status: 200, ok: true, statusText: "Ok", headers: Headers…}

Please, find a plunker of the issue here:-

https://plnkr.co/edit/oySgh2weZMOJddYA44Rp?p=preview

Here is the code that seams to be causing the issue:-

this.jsonp.request(`https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=&callback=JSONP_CALLBACK`).

      subscribe(images => {


      },
      (error) => {
        console.error(error);
      }

Raef Kandil · Accepted Answer · 2017-08-02 03:54:56Z

1

Based on my own analysis, this is why it is not working:-

callback=JSONP_CALLBACK normally changes the callback function name of the called Jsonp to make it the same as the callback that I give it in the parameter.\

For example:

https://itunes.apple.com/search?term=ff&media=music&limit=20&callback=JSONP_CALLBACK

will return a json response similar to:-

JSONP_CALLBACK ({ .... })

If I supply a url similar to:

https://itunes.apple.com/search?term=ff&media=music&limit=20&callback=sun

will return a response similar to:-

sun ({ .... })

and so forth.

When Angular sees a call similar to that: https://itunes.apple.com/search?term=ff&media=music&limit=20&callback=JSONP_CALLBACK

it transfers the call to:

ng_jsonp.__req0.finished( { ... })

and it waits for this callback function to intercept the response.

However, the problem is for the public flicker api, the url is not customisable:-

When I send a url similar to: https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=&callback=JSONP_CALLBACK

the response always starts with:-

jsonFlickrFeed({ .... })

and this is why it fails, because the callback method name cannot be changed.

answered Aug 2, 2017 at 3:54

Raef Kandil

3071 silver badge12 bronze badges

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

1 Comment

Ryan Porter Over a year ago

Please refer to stackoverflow.com/questions/66787002/… for an elegant solution to a similar problem with Angular's JSONP inflexibility. There is a reference to a Git project there with two different solutions: one pure Javascript, and a better Angular way of doing it. This is one of the questions that I found when I was looking for a solution, before I posted that question and got help. And so I'm leaving a breadcrumb here for the next person.

Collectives™ on Stack Overflow

JSONP callback issue with Angular 4

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related