Error retrieving jsonp from aurelia http client

Question

I have an application I am creating using Aurelia. I wish to retrieve the latest images from a user in instagram via ajax. I tried using the Aurelia http client because that's what the Flickr example on Aurelia's getting started page uses.

If I use http.get, then I get a CORS error from instagram. Trying http.jsonp, the inspected response shows the correct format, but I get what looks like a parsing error (Unexpected token ":") before the callback that handles the response is being executed.

I am able to successfully retrieve the images via AJAX using jQuery, but I am curious to know what I am doing wrong with the Aurelia http client.

Here are the relevant bits of the view model:

import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-http-client';

@inject(HttpClient)
export class Welcome {
  images = [];
  url = '[INSTAGRAM_URL]';

  constructor(http){
    this.http = http;
  }

  activate(){
    return this.http.jsonp(this.url).then(response => {
      this.images = response.data.map(function (d) {
            return {
                src: d.images.standard_resolution.url,
                caption: d.caption.text,
                when: d.created_time
            };
        });
    });
  }
}

Answer 1

Instagram API expects callback GET parameter to be present in request URL. This parameter should be a function name to wrap response object into (Aurelia will add something like &callback=jsonp_callback_59563). The reason why it works with jQuery.jsonp is that it adds callback parameter automatically behind the scene.

Correct code then should be:

return this.http.jsonp(this.url, 'callback').then(response => {
  this.images = response.content.data.map(function (d) {
        return {
            src: d.images.standard_resolution.url,
            caption: d.caption.text,
            when: d.created_time
        };
    });
});