Ember: Return a value or set a model property from Ember promise

Question

Update - more information below

If I have a promise, is it possible to return a value from it?

let itemData = [];
model.data.get('products').then(relatedItems => {
  relatedItems.forEach(function(item,index) {
    console.log(item.get('name')); // Product 1, Product 2 etc
    itemData.pushObject(item);
  });
},reject => {
  console.log('error '+reject);
});

If I try and return the itemData array after the promise has resolved I get undefined.

Alternatively (and preferably) I'd like to be able to set a model property when the promise has resolved:

// component code 

itemData:null,
init() {
  let model = this.get('data');
  model.data.get('products').then(relatedItems => {
     relatedItems.forEach(function(item,index) {
        this.set('itemData',item);
     });
  },reject => {
     console.log('error');
  });
}

The reason for all of this is that I need to sort the product items which I can only access via the promise (in this example). Having set the itemData property I was intending to do something like:

sortedItems:computed.sort('itemData','sortProperties'),
sortProperties:['name:desc']

More information:

In my product route, product.items.item I have a pagination component

 {{pagination-item-trad data=model}}

The model hook in the route product.items.item is

  model(params) {
    let itemModel = this.store.findRecord('product',params.id);
    let mainModel = this.modelFor('product.items');

    return Ember.RSVP.hash({
       data:itemModel,
       mainData:mainModel
    });
}

The mainModel will include the category model for that particular product item.

Since the product-category model has a many-to-many relationship with products, I need to access the product data in my component using a promise, which was not a problem until I needed to sort the product data. What I am trying to do is obtain the product information from the promise (itemData below) and then use that in the computed property. So the question is how I can extract the data from the promise for use elsewhere in the code? Is there a better way to achieve this? I hope this is clearer!

 sortedItems:computed.sort('itemData','sortProperties'),
 sortProperties:['name:desc']

The component in more detail:

 import Ember from 'ember';
 const {computed} = Ember;

 export default Ember.Component.extend({
   itemData:null,  // i would like to set this within the promise
   sortedItems:computed.sort('itemData','sortProperties'),
   sortProperties:['name:desc'],
   init() {
    let allData = this.get('data');
    let mainModel = allData.mainData;
    var self = this; 
    let itemData = [];
    mainModel.data.get('products').then(relatedItems => {
        relatedItems.forEach(function(item,index) {
        console.log(item.get('name')); // prints Product 1 etc etc
        itemData.pushObject(item);
    });
    self.set('itemData',itemData); // I can't do this
    },reject => {
      console.log('error '+reject);
    });
  }
  // rest of code omitted for brevity
});

There is a typo on the line 5, missing "'": let model = this.get('data^); — Pavol
Can you set a computed property dependent on the model? sorted: Ember.computed('data.model.products',function(){ return this.get('data.model.products').filter(...); }); — Pavol
This question is poorly constructed hard to understand what you're trying to achieve. But it looks like a case for Ember.PromiseArray. If you could give your model + controller + template code. We would easily solve this for you. — kris
Many thanks for getting back - apologies for the typo in line 5 - corrected.Will amend the question shortly to give more detail - sorry I thought it was clear, apologies if not. — Newfoundland

Kingpin2k Kingpin2k · Accepted Answer · 2016-05-31T14:46:57

Your scope is wrong inside your forEach, this no longer points to your component. You can either use another fat arrow or maintain a reference to the component scope using a variable.

Additionally, I doubt you are meaning to iterate and overwrite itemData on each iteration.

Ember: Return a value or set a model property from Ember promise

1 Answers