How to use ic-ajax with jsonp?

Question

In a controller:

/*globals Ember*/

import { raw as icAjaxRaw } from 'ic-ajax';
...
    myData: function() {
        var promise = new Ember.RSVP.Promise(function (resolve, reject) {
            var req = icAjaxRaw({
                type: 'GET',
                url: server+'/api/mydata?callback=?',
                dataType: 'jsonp', //problematic
            });
            req.then(
                function(result) {
                    console.log('myData', result.response);
                    resolve(result.response);   
                },
                function(response) {            
                    console.error('myData', response.jqXHR.responseText, response);
                    reject(response);
                }
            );
        });
        return promise;
    }.property(),

... and in the template using that controller:

{{myData}}

This displays:

    {
    "_id": 101,
    "_subscribers": []
    }

Which looks like an intermediate object, not what the promise resolves to. I have a feeling that this might be related to something to do with the ember run loop, as mentioned here

How to get the template to display what is displayed in the console log?

Bannister

Until there is a more substantial body of questions about the ic-ajax library, please don't create a tag for it. I removed it from your post for a reason. – Pyrology

@MartijnPieters that's the one tag that is most important to this question though – Bannister

No, not really. No expert will follow that tag, not yet; no one will find your post by following a tag with just one or two questions attached to it. – Pyrology

Don't just keep re-adding the tag. A roll-back war is not going to go anywhere. Please discuss such matters on Meta Stack Overflow instead. Your specific tag came under scrutiny because of a meta post. – Pyrology

So what if there is only one question with this tag, that makes the tag no less valid. By preventing the first one from being created, you prevent subsequent ones too. – Bannister

Of course not. Build a body of questions first, then create the tag. – Pyrology

@Bannister Please create a question on Meta Stack Overflow to discuss creation of the tag ic-ajax which appears to be somewhat controversial. – Freehand

Answer 1

You can't return a promise from a computed property.

Computed properties dont resolve promises, which means 'myData' is a promise not the value the promise resolves into. You should probably move this into the Route's model hooks. If that is not an option you can do something like this:

myData: {},

getMyData: function() {
  var self = this;
  var req = ic.ajax.raw({
    type: 'GET',
    url: 'http://ip.jsontest.com/?callback=?',
    dataType: 'jsonp'
  });
  req.then(
    function(result) {
      console.log('myData', result.response);
      self.set('myData', result.response);
    },
    function(response) {
      console.error('myData', response.jqXHR.responseText, response);
    }
  );
}.on('init')

Check this JSBin

Replacement