Ember and Handlebars Iterate Over a Set Array

Question

I'm working on learning Ember and am trying to do some small ideas with it. Currently, I am trying to receive text field input to filter a list and return the matching results. I have all of this working, you know, the 'hard' stuff. However, the part that isn't working is Handlebars reading the 'title' property of my array that I am returning. It's just blank.

Here is my template:

<script data-template-name="application" type="text/x-handlebars">
  {{input type="text" value=searchString placeholder="Search..."}}
  {{filterMovies}}
  <ul>
    {{#each searchResults}}
    <li>{{title}}</li>
    {{/each}}
  </ul>
</script>

And now my controller:

    App.ApplicationController = Ember.Controller.extend({
    filterMovies: function() {
      var self = this,
        searchString = self.get('searchString'),
        searchResults = [],
        filterArrLength = null,
        theFullMovieList,
        theFilteredMovieList = [];

      if (!searchString) {
        return;
      }

      var url = 'http://www.json-generator.com/api/json/get/clVKyWQSnC';
      Ember.$.getJSON(url).then(function(data) {
        theFullMovieList = data;

        theFullMovieList.filter(function(movie) {
          if (movie.title.toLowerCase().startsWith(searchString)) {
            theFilteredMovieList.push(movie);
          }
        });
        console.log(theFilteredMovieList);
        self.set('searchResults', theFilteredMovieList);
      });
    }.property('searchString')
  });

I have tried printing using {{this}}, {{this.title}}, {{searchResults.title}}, and {{title}} with no luck. However, logging the array shows the correct values.

Any ideas? View On CodePen

Daniel · Accepted Answer · 2015-12-06 11:10:05Z

1

Your each syntax is invalid. You have to use new syntax:

<ul>
  {{#each searchResults as |movie|}}
    <li>{{movie.title}}</li>
  {{/each}}
</ul>

See working demo on CodePen.

answered Dec 6, 2015 at 11:10

Daniel

18.7k8 gold badges69 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DoomageAplentty Over a year ago

Thank you! This was perfect.

Collectives™ on Stack Overflow

Ember and Handlebars Iterate Over a Set Array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related