The service's wrapping of the http.get() call resulted in an undefined return

Question

The service's wrapping of the http.get() call resulted in an undefined return

I've run into an issue where the http request is successful in fetching data from the server, but for some reason, $scope.catalogue always ends up being undefined. It seems this could be happening because the assignment occurs before the response is returned from the server. I thought I had handled the asynchronous nature of the operation within the service?

angular.module('catalogue', [])
.factory('Catalogue', ['$http', function($http){
    return {
        getCatalogue: function(){
            $http.get('./server.php').then(function(response){
                return response
            });
        },
        setCatalogue: function(JSON){
            $http.post('./server.php', JSON).success(function(){return 'successfully set data'});
        }
    }
}])

So in my controller, here's what's implemented:

$scope.catalogue = Catalogue.getCatalogue();

angularjs

Answer 1

Answer №1

Make sure to always fulfill the promise:

fetchItems: function(){
    return $http.get('./inventory.php')
}

Then in your script, you should do

Inventory.fetchItems().then(function(data){
    $scope.items = data;
});

Answer 2

Make sure to always fulfill the promise:

fetchItems: function(){
    return $http.get('./inventory.php')
}

Then in your script, you should do

Inventory.fetchItems().then(function(data){
    $scope.items = data;
});

Answer 3

Answer №2

If you want to enhance the separation of concerns, consider using Angular promises in a more efficient way. Here is an example:

angular.module('myapp',[])
  .service('Github', function($http, $q)
  {
    this.getRepositories = function()
      {
        var deferred = $q.defer();
        $http.get('https://api.github.com/users/defunkt')
        .success(function(response)
        {
          // Perform actions on the response
          response.username = response.login + ' ' + response.name;
          // Implement data filtering, manipulation, and decoration from the API
          // Then resolve the response
          deferred.resolve(response);
        }).error(function(response)
        {
          deferred.resolve(response);
        });
        return deferred.promise;
      }
  })
  .controller('MainCtrl', function($scope,Github) {
       Github.getRepositories().then(function(dt){
        $scope.user = dt;
       });
  });

To see a demonstration, check out the Plunker I created: http://plnkr.co/edit/r7Cj7H

Answer 4

If you want to enhance the separation of concerns, consider using Angular promises in a more efficient way. Here is an example:

angular.module('myapp',[])
  .service('Github', function($http, $q)
  {
    this.getRepositories = function()
      {
        var deferred = $q.defer();
        $http.get('https://api.github.com/users/defunkt')
        .success(function(response)
        {
          // Perform actions on the response
          response.username = response.login + ' ' + response.name;
          // Implement data filtering, manipulation, and decoration from the API
          // Then resolve the response
          deferred.resolve(response);
        }).error(function(response)
        {
          deferred.resolve(response);
        });
        return deferred.promise;
      }
  })
  .controller('MainCtrl', function($scope,Github) {
       Github.getRepositories().then(function(dt){
        $scope.user = dt;
       });
  });

To see a demonstration, check out the Plunker I created: http://plnkr.co/edit/r7Cj7H

The service's wrapping of the http.get() call resulted in an undefined return

Answer №1

Answer №2

Similar questions

Modify the ion-view view-title for each individual page

I want to show a string array in the ui-grid, with each ui-grid displaying a single row for each string in the array

Looking for guidance on how to specify the angular direction in the ng-repeat

Is there a way to incorporate the use of quotation marks within the ng-bind directive in AngularJS?

Exploring the Dynamic Styling Power of Angular's ng-class Directive Alongside the Transition from

What is the best way to manage photos from your phone without having to upload them online?

What is the purpose of enclosing an Angular app within a function?

What is the proper way to utilize a filtered object based on its properties within an Angular controller?

Oops! Looks like we encountered a fatal error while running the unit tests. Unfortunately, the unit

What is the best way to use AngularJS to extract values from the first dropdown menu that are linked to the values selected in the second

Adjusting the scope value following the completion of an HTTP request in AngularJS

Tips for updating a column with just one button in AngularJS

How to choose multiple checkboxes in AngularJS by utilizing the shift key and mouse click feature?

Is it possible to simultaneously use two $scoped variables within an Angular controller?

Understanding Restangular with Typescript can be challenging, especially when dealing with a 'restangularized' response object

Retrieve the value of $state from within the template

Angular encountered an issue with an HTTP POST request, as the 'Access-Control-Allow-Origin' header was not found on the requested resource

Validating Angular UI without requiring an input field (validating an expression)

Issues with link behavior when using Angular UI-Router

Customize the HTML tags in the Froala text editor with easy insertion and removal