0

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?

Toonsylvania
  • 453
  • 6
  • 21
  • 1
    It appears that you've committed a similar error as the OP in this question: http://stackoverflow.com/questions/23749148/cannot-read-response-from-angularjs-resource-delete (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 May 20 '14 at 02: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 May 20 '14 at 03: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 May 20 '14 at 03:55

2 Answers2

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

Marc Kline
  • 9,399
  • 1
  • 33
  • 36
  • 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; }); };` – Toonsylvania May 20 '14 at 09:36
1

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

Cranespud
  • 91
  • 1
  • 5