New Twiddle

controllers.application.js

import Ember from 'ember';
import DS from 'ember-data';

/**
 * Returns true iff the number passed in is even
 * @param {Number} x
 * @return {Boolean}
 */
function isEven(x) {
  return x % 2 == 0;
}

/**
 * Returns a Promise which resolves to true if the number passed in is even,
 * and resolves to false otherwise
 * @param {Number} x
 * @return {Promise<Boolean>}
 */
function isEvenAsync(x) {
  return new Ember.RSVP.Promise(function(resolve) {
    let result = isEven(x);
    resolve(result);
  });
}

/* A DS.PromiseArray acts like both an Array and a promise.
 * Have a look at its documentation:
 * - http://emberjs.com/api/data/classes/DS.PromiseArray.html
 * Once the underlying promise of the DS.PromiseArray resolves, its
 * `content` property is set to the resulting value of that promise,
 * (which should be an Array). This Array can then be used, e.g. in a template.
 *
 * DS.PromiseArray has a built-in method `filter` (inherited from Ember.ArrayProxy).
 * This method takes a single parameter, a function `fn`, which takes a single value
 * and returns a Boolean.
 * Before the underlying promise of the PromiseArray has resolved, applying `filter`
 * gives an empty Array.
 * Once the underlying promise of the PromiseArray resolves to an array `a`, `filter`
 * returns an array containing only those elements of `a` for which `fn` returns
 * true.
 * The resulting array can be used, e.g. in a template.
 */

/* Your task is to extend the DS.PromiseArray class with a similar function called
 * `filterAsync`, which should have the same effect as `filter` with one subtle
 * difference:
 * The function `asyncFn`, which `filterAsync` takes as a parameter, takes
 * a value, but instead of a Boolean, it returns a Promise which resolves to a
 * Boolean.
 * E.g. the function `isEvenAsync` above is such a function.
 * `filterAsync` should still produce an array once the PromiseArray's underlying
 * promise resolves.
 */

DS.PromiseArray.reopen({

  /**
   * @method filterAsync
   * @param {Function<any -> Promise<Boolean>>} asyncFilterFn
   * @return {Array}
   */
  filterAsync(asyncFn) {
    var result = [];
    
    this.map(i=>{
      asyncFn(i).then(res=>{
         if(res) result.push(i);
      })
    })

    var request = new Ember.RSVP.Promise(resolve=>{
	    resolve(result);
  	});    
    
		return DS.PromiseArray.create({ promise: request });    
  }
});

/* filteredModel and asyncFilteredModel below should eventually have the same value.
 */
export default Ember.Controller.extend({

  _initModel: Ember.on('init', function() {
    this.set('model', DS.PromiseArray.create({
      promise: new Ember.RSVP.resolve([0,1,2,3,4,5,6,7,8])
    }));
  }),

  filteredModel: Ember.computed('model.[]', function(){
    return this.get('model').filter(isEven);
  }),
  
  asyncFilteredModel: Ember.computed('model.[]', function(){
    return this.get('model').filterAsync(isEvenAsync);
  }),
  
});

templates.application.hbs

{{#each filteredModel as |n|}}
{{n}}
{{/each}}
<br>
{{#each asyncFilteredModel as |n|}}
{{n}}
{{/each}}

twiddle.json

{
  "version": "0.10.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.6.0",
    "ember-data": "2.6.1",
    "ember-template-compiler": "2.6.0"
  },
  "addons": {}
}