Ajax Promise on Property not returning data

Question

I have an Ember controller with a simple property that should get a list of files from the server. Server-Side all good, data is returning and showing on console.

In controller I have:

imgFiles: new Ember.RSVP.Promise(function(resolve, reject) {
                Ember.$.ajax(ENV.apiHost+'/'+ENV.apiNamespace +'/folderwalk/newsimg', {
                    success: function(response) {
                        // console.log(response);
                        resolve(response);

                    },
                    error: function(reason) {
                        reject(reason);

                    }
                });
            }),

In template:

{{imgFiles}}  // shows [object Object]
{{#each imgFiles as |file|}}   // doesn't loop at all
        x {{file}}
{{/each}}

I've tried all variations I could think of. Encapsulate in function and return the Promise, return response on success,...
Still I can not get the promise to return the actual data.

`Still I can not get the promise to return the actual data` - a promise is a promise of a future value (or something like that) - nowhere in your code are you using the only function you need ... `.then` - being the one method a Promise has to have and the only way to get the "value" - hint: `imgFiles.then(result => console.log(result))` - will log what is resolved at `resolve(response)` — Jaromanda X, Apr 17 '17 at 02:22
ok, thanks for that! that will log it into console. But how can I return it? I tried `.then(result => return result)` which of course gave me an error.... — Jeff, Apr 17 '17 at 02:28
I don't know how to use promises correctly in ember, I'm afraid - all I can tell you is what a Promise actually is — Jaromanda X, Apr 17 '17 at 02:29

score 1 · Accepted Answer · answered Apr 17 '17 at 04:14

Yes, when you log the response, you will get the entire payload. But, Ember is unaware of the new data (Previously it would be a Promise) that has been returned from the server. You have to explicitly inform Ember about the new data using set.

  imgList: Ember.computed({
    get() {
      return new Ember.RSVP.Promise((resolve, reject) => {

        $.ajax('https://jsonplaceholder.typicode.com/photos').then((data, textStatus, jqXHR) => {
          console.log(data);
          let firstHunPhotos = data.slice(0,100);
          this.set('imgList', firstHunPhotos); // <- set the new data | set the entire data if you want!
        });
      });
    },
    set(key, value) {
        return value // <- don't forget the setter!
    }
  })

Kindly refer to this twiddle. https://ember-twiddle.com/25d11c4c4650c18183df3595ca21f9c3?numColumns=2&openFiles=templates.application.hbs%2Ccontrollers.application.js

score 0 · Answer 2 · answered Apr 17 '17 at 06:17

Usually these are coming from models. Rendering will be delayed until models are resolved.

Your case can be implemented in a bit different way. Fetch the details on mount/init event and set the resolved value to a property and bind that property with the view. View will be re-rendered once the value is updated

Ajax Promise on Property not returning data

2 Answers2