AngularJS doesn't update an array returned from a promise

Question

I'm have an issue after querying youtube API for data. The problem is replicated in this jsfiddle in case you want to try it jsfiddle.net/YBvQJ/4/

The problem is as follows: the first time I search something the results are displayed correctly. But, if I perform a second search, the results will not be updated in the view, even though the search has been performed correctly.

I have a service that calls youtube API using $http to do the search given a parameter. The return value is a promise:

.service('youTubeSearchService', ['$log', '$http', '$q', ($log, $http, $q) ->
  apiKey = 'myApiKey'
  url = 'https://www.googleapis.com/youtube/v3/search'
  deferred = $q.defer()
  return service =
    search: (query) ->
      $http.get(url, params: {
          key: apiKey
          type: 'video'
          maxResults: '6'
          part: 'id,snippet'
          fields: 'items/id,items/snippet/title'
          q: query
      })
      .success (data) ->
        $log.info "In success"
        $log.info data
        deferred.resolve data.items.map (item) ->
            videoId: item.id.videoId
            title: item.snippet.title
      .error (data) ->
        $log.info "In error"
        $log.info data
        deferred.reject data
      return deferred.promise
])
.config(['$httpProvider', ($httpProvider) ->
  # Disable this header or the youtube API won't work
  delete $httpProvider.defaults.headers.common['X-Requested-With']
])

This service is used in the controller like this:

.controller('SearchCtrl', ['$log', '$scope', 'youTubeSearchService'
  , ($log, $scope, youTubeSearchService) ->
      $scope.search = ->
        $scope.results = youTubeSearchService.search($scope.query)
  ])

The data is used in the view like this:

<input type="text" ng-model="query" value="ejemplo">
<button ng-click="search()">Search in YouTube</button>
<li ng-repeat="item in results">
    <p><a target="blank" href="//www.youtube.com/watch?v={{item.videoId}}">
        {{item.title}}
    </a></p>
</li>

I have put log calls in the service to show that the youtube API gives back a new array.

I think the problem might have something to do with the scope not being updated in the view. Shouldn't it be, because the promise will call a $digest cycle, and so will the ng-click directive.

Help would be much appreciated! Thank you in advance.

jcollum · Accepted Answer · 2013-10-30 17:06:44Z

3

Your search is returning a promise from the service. So you are setting $scope.results to a promise.

$scope.results = youTubeSearchService.search($scope.query)

Instead you should handle the promise and set the results:

youTubeSearchService.search($scope.query).then(function(results) {

    $scope.results = results;    
}, function(error) { 

    $scope.error = error;
});

In coffeescript:

youTubeSearchService.search($scope.query).then ((results) ->
  $scope.results = results
), (error) ->
  $scope.error = error

edited Oct 30, 2013 at 17:06

jcollum

47k64 gold badges212 silver badges348 bronze badges

answered Oct 29, 2013 at 23:15

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

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

1 Comment

jcollum Over a year ago

added the coffee for you

Collectives™ on Stack Overflow

AngularJS doesn't update an array returned from a promise

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