title: Ember.js - how to pass an array or a model from the controller to the template?
body: <p>I'm getting two errors with the code I have below.  I'm not sure how to go about fixing it.  It looks like #each is looking for a promise to be returned rather then a model or an array.  Am I right?  If yes, how can I have it to take an array or a model?  Thanks.</p>
  
  <blockquote>
    <p>Error 1. <strong>Assertion failed: The value that #each loops over must be an
    Array. You passed [object Object] ember.js:3231</strong></p>
    
    <p>Error 2. <strong>Uncaught TypeError: Object [object Object] has no method
    'addArrayObserver'</strong></p>
  </blockquote>
  
  <h2>Controller</h2>
  
  <pre><code>var StudentBooksController = Ember.Controller.extend({
      needs: ['application','request'],
  
      selectedBooks: function() {
          //return an array here such as [1, 3, 5, 7]
      }.property(),
      studentList: function() {
          return this.store.find('student');
      }.property(),
      filteredStudentBooks: function() {
          var self = this;
  
          // I tried "return []" here and no error on the console.
  
          return self.get('studentList').then(function (students){           
              // I tried "return []" here and it still gave me the same error on console.
  
              return self.get('selectedBooks').then(function(sb){
                  var aList = students.get('content');
                  aList.forEach(function(al){
                      al.set('hasAccess', _.contains(sb, sb.get('id') ));
                      console.log(_.contains(sb, sb.get('id') ));
                  });
  
                  return aList;
              });
          })
      }.property('selectedBooks','studentList')
  });
  
  export default StudentBooksController;
  </code></pre>
  
  <h2>Route</h2>
  
  <pre><code>//----- Nothing in the Route file ---
  </code></pre>
  
  <h2>Template</h2>
  
  <pre><code>    {{#each filteredStudentBooks}}
          // do something here such as printing the name
          {{name}}
          {{#if hasAccess}}
              User has access.
          {{else}}
              User doesn't have access.
          {{/if}}
      {{/each}}
  </code></pre>
  
  <h2><strong>SOLUTION</strong></h2>
  
  <p>With @kingpin2k's help, here is the solution I ended up with.</p>
  
  <pre><code>    filteredStudentBooks: function() {
      var self = this, 
          resp = [];           
  
      self.get('studentList').then(function (students){           
          // I tried "return []" here and it still gave me the same error on console.
  
          self.get('selectedBooks').then(function(sb){
              var aList = students.get('content');
  
              var sortedStudentList = aList.sortBy('name');
              aList = sortedStudentList ;
  
              aList.forEach(function(al){
                  al.set('hasAccess', _.contains(sb, sb.get('id') ));
                  console.log(_.contains(sb, sb.get('id') ));
                  resp.pushObject(al);
              });                              
  
          });
      })
      return resp;
  }.property('selectedBooks.[]','studentList.[]')
  </code></pre>