AngularJS callback function not working

Question

I am using WebAPI on the server side:

    public int Get(int productId)
    {
        //removed the actual logic to simplify the example
        return 101;
    }

The Angular:

$scope.showDetails = function (product) {
    $scope.selectedProduct = product;
    var queryArgs = { productId: product.id };
    $scope.averageQuantity = Quantity.query(queryArgs, function() {
        //callback function
        console.log($scope.averageQuantity); // this shows a promise instead of an actual object
        //and then open modal and pass the $scope as a parameter
    });
};

//the resource:
.factory('Quantity', ['$resource', function ($resource) {
return $resource('/api/quantity', {}, { 'query': { method: 'GET', isArray: false } });
}])

Instead of the number 101 I see the promise: {"0":"1","1":"0","2":"1"}

How can I implement the callback in order to see the object and not the promise?

It appears that you've committed a similar error as the OP in this question: stackoverflow.com/questions/23749148/… (See: RobM's answer) Instead of trying to pass a callback as a parameter, you need to use then, such as $scope.averageQuantity = Quantity.query(queryArgs).then(function(results){ /* console.log(results.data */ }) — Marc Kline
– Marc Kline, Commented May 20, 2014 at 2:58
Thanks for the reply, Marc. I think then() method is a jQuery specific method and I am not using jQuery on this project (I was asked not to). I looked at that link and I was indeed missing a parameter (for post data), which was right before the success function. Unfortunately it still doesn't work. It makes me think it might actually be a $resource misconfiguration rather than a callback issue? This is what I've tried: $scope.averageQuantity = Quantity.query(queryArgs, {}, function(returnValue, responseHeaders) { console.log(returnValue); }); — Toonsylvania
– Toonsylvania, Commented May 20, 2014 at 3:26
then isn't jQuery specific. Angular includes $q, patterned after Q for promises, which includes a then method. Still, I must admit that I was wrong in my initial judgement. The problem has nothing to do with callbacks or promises. My upcoming answer will show what the problem is. — Marc Kline
– Marc Kline, Commented May 20, 2014 at 3:55

Marc Kline · Accepted Answer · 2014-05-20 04:25:25Z

1

The issue is not your callback implementation. The problem is that you're using $resource, which is meant for use with RESTful API resources that return JSON formatted strings, with a service that returns plain-text with no structured formatting.

Solution 1:

If you're able to change the format of the data your WebAPI server returns, you can have it return a simple JSON object. It could be something like:

{"value": "101"}

Then, your $resource will be work more or less as is.

Solution 2:

If you can't or otherwise don't want to modify your WebAPI response, you can use $http instead of $resource in Angular:

$http.get('example', {params: params});

This will work to retrieve a plain-text response without munging the response data the way $resource does.

Working Plunker demonstrating both methods

answered May 20, 2014 at 4:25

Marc Kline

9,4091 gold badge35 silver badges36 bronze badges

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

1 Comment

Toonsylvania Over a year ago

Thank you, Marc! I used something very similar by making use of $http, here's the code:

$scope.showDetails = function(product) {             $scope.selectedProduct = product;             $http.get('/api/quantity?productId=' + product.id).then(function (results) {                 $scope.averageQuantity = results.data;             });     };

Cranespud · Accepted Answer · 2014-05-20 06:31:18Z

1

Make sure you are including application/json headers and json data from webapi, seems like you aren't.

answered May 20, 2014 at 6:31

Cranespud

911 silver badge5 bronze badges

Collectives™ on Stack Overflow

AngularJS callback function not working

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related