Return function value from $http GET service

Question

I am trying to return an array from a function once onClick is triggered. I see the values contained in the array in the console. But I don't see the values displayed on the HTML page.

The Controller:

$scope.chosenFilm = []; //The array where values are stored

  //onClick function
  $scope.insertFilm = function () {  
     console.log("Film saved in watch list!");
     getSelectedFilm(); //Call function
}

function getSelectedFilm() {
  return $http.get('/watch-list').then(function(response) {
      $scope.chosenFilm = response.data;     
      $log.info($scope.chosenFilm[0]); // Values displayed in console!
        return $scope.chosenFilm; 
      });
}

HTML Page where values would be displayed:

<div class="container">
        <table class="table">
          <thead>
            <tr>
              <th>Film</th>
              <th>Poster</th>
              <th>Overview</th>
              <th>Genres</th>
              <th>Release</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="film in chosenFilm">
              <td>{{film.title}}</td>
              <td><img ng-src="{{film.poster}}"></td>
              <td>{{film.overview}}</td>
              <td>{{film.genres}}</td>
              <td>{{film.release |  date:  "dd.MM.y" : UTC+00:00 }}</td>
            </tr>
          </tbody>
        </table>
</div>

Try remove `return` before `http` service. and also you don't need return the array. just sufficient `$scope.chosenFilm = response.data;` — Hadi J, Aug 02 '17 at 19:00
@Hadi, but that is not a problem in this case. It should not interfere with the rendering of the elements — lealceldeiro, Aug 02 '17 at 19:02
It would be good if could provide us with a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) — lealceldeiro, Aug 02 '17 at 19:08
Maybe , your html template is not in correct scope , can you check where you typed ng-controller — Mumin Korcan, Aug 02 '17 at 19:46
Hi @korcan the controller is being used I tested it by printing something out on the page .when('/watch-list', { templateUrl : 'js/views/watch-list.html', controller : 'WatchListController' }); — Yacub Ali, Aug 02 '17 at 19:49

score 1 · Answer 1 · answered Aug 02 '17 at 19:07

1

This method returns promise value and it is asynchronous. Because of the you have to use htpp.get methods with callback functions.

As a result, with respect to your code you can use as

function getSelectedFilm() {
  $http.get('/watch-list').then(function(response) {
      $scope.chosenFilm = response.data;     
      $log.info($scope.chosenFilm[0]); // Values displayed in console!
        $scope.chosenFilm; 
      })
 .then (() => { 
console.log($scope.chosenFile);
......something else...; // you can see the  data 
});

answered Aug 02 '17 at 19:07

Dr. X

2,890
2
15
37

Because of the asynchronous methods it does not work sequentially. If you want some sequential results you can use promise values by using .then ( (result) => { ..something else...} ). then () .... – Dr. X Aug 02 '17 at 19:08
console.log($scope.chosenFile); seems to return undefined in the console. – Yacub Ali Aug 02 '17 at 19:14
There is an offical information you can seek is https://docs.angularjs.org/api/ng/service/$http – Dr. X Aug 08 '17 at 10:45

score 1 · Answer 2 · answered Aug 02 '17 at 19:34

1

getSelectedFilm() that calls the HTTP GET is not executed

It is inside insertFilm() that is never called

answered Aug 02 '17 at 19:34

squidwardprops02

135
6

getSelectedFilm() is still called by insertFilm(). I tested it and got the values displayed in the console but not on the page. insertFilm() is onClick function. – Yacub Ali Aug 02 '17 at 19:37

Mumin Korcan · Answer 3 · 2017-08-02T21:50:07.620

I recommend to use as controller syntax.The reason is angular does not reflect $scope array reference changes to the view properly because it generates new scope for ng-repeat i.e when you change the reference of $scope.chosenFilm ng-repeat will watch the old one at that time. For more detail : ng-repeat not updating on update of array. Your problem is excatly same as that one because you change chosenFilm reference after some time (promise resolving time) with response.data. If you dont like controller as syntax you can quickly use this one :

angular.extend($scope.chosenFilm, response.data);

score 1 · Answer 4 · answered Aug 02 '17 at 20:25

try this

$scope.chosenFilm = []; //The array where values are stored

 //onClick function
 $scope.insertFilm = function () {  
 console.log("Film saved in watch list!");
 $http.get('/watch-list')
 .then(function(response) {
      $scope.chosenFilm = response.data;     
      $log.info($scope.chosenFilm[0]); // Values displayed in console!
  });
}

Return function value from $http GET service

4 Answers4