getting data from an api, but can't render the response

Question

i can get the input and fetch the json i can also insert the data to the $scope.movies

but i can't see the results. what am i missing?

thanks.

the html:

<!DOCTYPE html>
<head>
  <title>Learning AngularJS</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
  <script src="app.js" type="text/javascript"></script>
  <script src="mainController.js" type="text/javascript"></script>
</head>
<body>
  <div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
    <input type='text' ng-model='searchMovies' />
    <button ng-click='addNew()'>Add</button>
    <ul>
        <li ng-repeat="movie in movies">1</li>
    </ul>
  </div>
</body>
</html>

the app:

var app = angular.module('MyTutorialApp',[])

the controller:

  app.controller("MainController", function($scope){
  $scope.movies = null;
  $scope.searchMovies = null;
  $scope.addNew = function() {
    if ($scope.searchMovies != null && $scope.searchMovies != "") {
        fetch('http://www.omdbapi.com/?s=' + $scope.searchMovies)
                .then(data => data.json())
                .then(data => {
                    console.log(data)
                    $scope.movies = data.Search
                console.log($scope.movies)});
    }
  }
});

edit: i'm using live-server to to run this code. maybe it's connected?

stholzm · Accepted Answer · 2017-03-19 18:48:41Z

1

Try this:

...
$scope.movies = data.Search
$scope.$applyAsync()

Because you are using fetch and not $http, Angular does not notice that the scope object has been changed. $applyAsync manually schedules the change detection.

To avoid these hassles, I would recommend you to switch to $http.

Edit: $applyAsync is not available in Angular 1.0.7 - it works if you upgrade to a recent version like https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js.

edited Mar 19, 2017 at 18:48

answered Mar 19, 2017 at 18:33

stholzm

3,46521 silver badges31 bronze badges

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

5 Comments

Nikolaj Dam Larsen Over a year ago

Instead of using $scope.$applyAsync(); he could wrap the promise in $q.when() for similar effect. Some might find that approach cleaner.

user4602966 Over a year ago

the $applyAsync() did not work. trying now the $http

stholzm Over a year ago

Ah, you are using AngularJS 1.0.7 for some reason? That version is really outdated, can you upgrade?

Nikolaj Dam Larsen Over a year ago

@user4602966 Beware when using $http that the response is passed to the promise a bit differently than with fetch. You'll be using the promise like this instead: .then(response => response.data).

user4602966 Over a year ago

the different version and http fixed the problem :) thank you @stholzm

Collectives™ on Stack Overflow

getting data from an api, but can't render the response

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related