CODEWITHSUNDEEP
javascriptjquerybackbone.jsautocomplete
Peter Boomsma
Peter Boomsma

Reputation: 9806

backbone Uncaught TypeError

I'm working of this code,

<script>
  autocompleteRemote = new Backbone.AutocompleteList({
    url: function() { return 'http://ws.audioscrobbler.com/2.0/?method=artist.search&api_key=cef6d600c717ecadfbe965380c9bac8b&format=json&' + $.param({ artist: $('form#autocomplete-remote input[name=search]').val() }); },
    filter: null,
    el: $('form#autocomplete-remote input[name=search]'),
    template: _.template('<p><%= name.replace(new RegExp("(" + $("form#autocomplete-remote input[name=search]").val() + ")", "i") ,"<b>$1</b>") %></p>'),
    delay: 500,
    minLength: 3,
    value: function(model) { return model.get('name') },
  }).resultsView.collection.parse = function(resp) {
    return resp.results.artistmatches.artist;
  };
</script>

But I'm trying to connect it to the tmdb api like this,

autocompleteRemote = new Backbone.AutocompleteList({
  url: function() {
    return 'http://api.themoviedb.org/3/search/movie?api_key=' + api + '&' + $.param({query: $('form#autocomplete-remote input[name=search]').val()})
  },

  filter: null,

  el: $('form#autocomplete-remote input[name=search]'),
  template: _.template(
    '<p><%= name.replace(new RegExp("(" + $("form#autocomplete-remote input[name=search]").val() + ")", "i") ,"<b>$1</b>") %></p>'
  ),
  delay: 500,
  minLength: 3,
  value: function(model) { return model.get('name') }
  ,

  })

  .resultsView.collection.parse = function(resp) {
    return resp.results.moviematches.query;
  };

  var api = 'a8f7039633f206xx42cd8a28d7cadad4'

As you can see I changed a few things like the url and put the api key in a var to clean up the code a bit. I also changed the word artist to query so it would give me back the right url. But I'm getting a error in the console log and I'm drawing a blanc. 

Uncaught TypeError: Cannot read property 'query' of undefined
Backbone.AutocompleteList.resultsView.collection.parse 
.extend.set
options.success
fire
self.fireWith
done
callback

The source material can be found here -> http://aghull.github.io/coding/2013/03/09/Backbone-autocomplete-lists/ Autocomplete using remote Collection

Upvotes: 0

Views: 133

Answers (1)

vvahans
vvahans

Reputation: 1857

Here is a nice resource which will help to find out response body. As I can see from test response generated there, there is no moviematches property. You need resp.results which is just a collection (array) of objects (movies I guess).

So you need to change your code to:

var api = 'a8f7039633f206xx42cd8a28d7cadad4';

autocompleteRemote = new Backbone.AutocompleteList({
  url: function() {
    return 'http://api.themoviedb.org/3/search/movie?api_key=' + api + '&' + $.param({query: $('form#autocomplete-remote input[name=search]').val()})
  },

  filter: null,

  el: $('form#autocomplete-remote input[name=search]'),
  template: _.template(
    '<p><%= name.replace(new RegExp("(" + $("form#autocomplete-remote input[name=search]").val() + ")", "i") ,"<b>$1</b>") %></p>'
  ),
  delay: 500,
  minLength: 3,
  value: function(model) { return model.get('name') }
  ,

  }).resultsView.collection.parse = function(resp) {
    return resp.results;
  };

I tried to make a comment but it became an answer :)

Edit:

Use this fiddle for tests. Place correct API_KEY and try again. I have tried with your existing api_key, but it's invalid.

Upvotes: 1

Related Questions