Pass the outcome back to the calling function

Question

Pass the outcome back to the calling function

I've been struggling with this issue for a while. I am working with ion-autocomplete and trying to retrieve data using a factory.

The Factory I'm using is as follows:

myApp.factory('items', function($http){
   return {
      list: function(query,callback){
        $http.get('http://192.168.100.100/myApp/products/' + query).success(callback)
        }
        };
        });

To fetch the data, I use:

   items.list(function(items) {
      $scope.items = items;
    });

In the autocomplete demo, the request data looks like this:

  $scope.getTestItems = function (query) {
                    return {
                        items: [
                            {id: "1", name: query + "1", view: "view: " + query + "1"},
                            {id: "2", name: query + "2", view: "view: " + query + "2"},
                            {id: "3", name: query + "3", view: "view: " + query + "3"}]
                    };
                };

I thought this solution would work:

   $scope.getTestItems = items.list(query,function(items)
        {   
        console.log(items);
        return items;
        }
        )

However, it's clear that it's not working. I also tried:

   $scope.getTestItems = function(query)
   {
   items.list(query,function(items)
        {   
        console.log(items);
        return items;
        }
        )
    }

Although this does show me the result in the console, it's not being returned to getTestItems.

javascript angularjs asynchronous

Answer 1

Answer №1

Based on the documentation (assuming I have the correct library), it is possible to return a promise.

myApp.factory('items', function($http){
    return {
        list: function(query) {
            return $http.get(... + query).then(function(res) {
                return res.data; // extract the response data
                // refer to the "Returns" section at https://docs.angularjs.org/api/ng/service/$http#usage
            });
        }
    };
});

and in the controller:

$scope.getTestItems = function(query) {
    return items.list(query);
};

Answer 2

Based on the documentation (assuming I have the correct library), it is possible to return a promise.

myApp.factory('items', function($http){
    return {
        list: function(query) {
            return $http.get(... + query).then(function(res) {
                return res.data; // extract the response data
                // refer to the "Returns" section at https://docs.angularjs.org/api/ng/service/$http#usage
            });
        }
    };
});

and in the controller:

$scope.getTestItems = function(query) {
    return items.list(query);
};

Answer 3

Answer №2

How about giving this a try?

Manufacturing Plant

 collection: function(query,callback){
    return $http.get('http://192.168.100.100/myApp/products/' + query)
 }

This technique involves returning the promise directly from the manufacturing plant.

Supervisor

$scope.fetchItems = function(query){
  items.collection(query).then(function(items){   
    console.log(items);
  });
}

The function will be triggered as soon as the promise is fulfilled.

Answer 4

How about giving this a try?

Manufacturing Plant

 collection: function(query,callback){
    return $http.get('http://192.168.100.100/myApp/products/' + query)
 }

This technique involves returning the promise directly from the manufacturing plant.

Supervisor

$scope.fetchItems = function(query){
  items.collection(query).then(function(items){   
    console.log(items);
  });
}

The function will be triggered as soon as the promise is fulfilled.

Answer 5

Answer №3

One potential solution to consider is as follows:

myApp.service('products', function($http){
   return {
      fetch: function(searchQuery){
       return $http.get('http://192.168.100.100/myApp/items/'+searchQuery);
        }
        };
        });

Next, within your controller:

var promise = products.fetch(searchQuery);
promise.then(function(response){
// Implementation logic
$scope.itemsList = angular.fromJson(JSON.parse(response.data));
});

Answer 6

One potential solution to consider is as follows:

myApp.service('products', function($http){
   return {
      fetch: function(searchQuery){
       return $http.get('http://192.168.100.100/myApp/items/'+searchQuery);
        }
        };
        });

Next, within your controller:

var promise = products.fetch(searchQuery);
promise.then(function(response){
// Implementation logic
$scope.itemsList = angular.fromJson(JSON.parse(response.data));
});

Pass the outcome back to the calling function

Answer №1

Answer №2

Answer №3

Similar questions

Unexpected token < error encountered during parsing in jQuery Ajax long polling append

Tips for removing or changing the X-Powered-By header in a Sails.js application

Exploring the concept of 'Abstract classes' within the Svelte framework

Does using .detach() eliminate any events?

Having trouble displaying a list in HTML using ngFor syntax

Harness the power of electrons with the simple push of a button - initiating program execution

Is there a way to delay the start of an ajax function until a few moments after the user

Fill a popup window with data retrieved from a MySQL query result

jquery sequential fade effect

Setting the selected value of a static select menu in Angular 2 form

Ways to clear the Yeoman index.html cache

Error: The parameter "callback" must be in the form of a function

What is the correct way to execute this script?

Modal box fails to refresh content

Efficient management of jQuery variables

Ways to retrieve the complete user object in passport

Show InfoWindow on Google Maps by hovering, not clicking

Overlap of sub menus

How to implement dynamic aggregate functions with parameters in Express and Mongoose

"Auth.currentSession is indicating that there is no user currently logged in