Angular gets String as an array?

Question

I work together with AngularJS and ASP.Net Web API working together. I have a TestController in an API that is just as simple:

public class TestController : ApiController { [HttpGet] public String Ping() { return "Pong"; } } 

In Chrome, I can go to http://localhost/api/Test/Ping , and the violinist shows a simple "Pong" result, and the browser shows:

 <string xmlns="http://schemas.microsoft.com/2003/10/Serialization/">Pong</string> 

Back in Angular JS, I am setting up a factory to call the Ping function:

 app.factory('API', ['$resource', function ($resource) { return { Ping: function () { var result = $resource('api/Test/Ping', {}, { get: { method: 'GET' }, isArray: false }); return result.get(); } }; }]); 

And a super simple controller:

 app.controller('MyCtrl', [ '$scope', 'API', function ($scope, API) { $scope.CallTest = function () { API.Ping().$promise.then(function (response) { alert(response); }); } }]); 

When I click on the button that CallTest is bound CallTest , it makes a call, the API returns Pong as it should, but the returned object is not quite what I would expect. The answer is an odd object:

 { 0: """, 1: "P", 2: "o", 3: "n", 4: "g", 5: """, $promise: {...}, $resolved: true } 

I am not getting any errors and everything is syntactically working fine. However, I was hoping that response would be a string, especially since I set isArray to false in my factory API . I believe Angular should return a “Resource” that has $promise and $resolved , so now I understand that this may not work. Besides creating a trivial wrapper in WebAPI to return a string as a parameter in Model, are there any options on the client side so that response can contain a regular string instead of this pseudo-array? Like maybe response.data or something?

EDIT: When I request from the browser, the Accept header contains:

 text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 

Which leads to the XML result above. When Angular requests the same url, the Accept header contains:

 application/json, text/plain, */* 

This leads to the fact that the content of the response is simply "Pong"

Answer 1

As described in the docs, $resource is a factory that creates a resource object that allows you to interact with server data sources on a RESTful server.

In your case, you are not trying to interact with the proper RESTful data source, so the behavior seems weird.

Until you have a proper RESTful data source, and until you just want to hit the API endpoint and get a simple answer (like a string), you should use the $http service :

 $http.get('api/Test/Ping').success(function (data) {...})... 

eg:.

 app.factory('API', ['$http', function ($http) { return { Ping: function () { return $http.get('api/Test/Ping'); } }; }]); app.controller('MyCtrl', ['$scope', 'API', function ($scope, API) { $scope.CallTest = function () { API.Ping().success(function (data) { alert(data); }); }; }]); 

Answer 2

As described in the Angular repository here , string literals are converted to objects when toowClearAndCopy iterates through the keys. In my case, passing a string literal to $ resource made the literal become an array of characters. The first way I could get around this is to assign a literal to a variable and pass the variable.

 api.Trip.get(data.token) - Incorrect api.Trip.get({token: data.token}) - Correct. 

Seeing how you come from the web API, this will most likely require your response to be sent as a JObject or JToken. My web API returns a JObject using the Newtonsoft JSON.net library, and Angular hasn't missed a bit yet.