WebApi Method with single value and AngularJs $http json handling

Question

I am encountering an issue and I ran out of ideas, I need some guidance towards the origin and/or the solution:

Server Side

I added the standard Microsoft Web Api Controller class "ValuesController" which looks like this:

public class ValuesController : ApiController
{              
   public string Get(int id){ return "value"; }
   ...

Client Side

In my AngularJS Controller function I have a simple get

$http({method:'GET',url: '/api/values/1'}).success(function(data){
        $scope.value  =data;
    })

The HTML looks like this:

  <input type="text" ng-model="value" />

The weird thing(the issue) is that I get: "value" in my input instead of just value (no quotes). To avoid misunderstandings, I am getting this:

enter image description here

Instead of this:

enter image description here

And of course the questions are: why?? and how do I fix it*?

*hopefully the answer will not be returning an object instead of a simple string :)

Your question seems related to this another one: JSON String in response shows up with quotes — Edwin Dalorzo
– Edwin Dalorzo, Commented Feb 4, 2014 at 18:29

Edwin Dalorzo · Accepted Answer · 2014-02-04 18:40:39Z

5

I have the impression that this is due to security vulnerabilities in the JSON format. In the documentation of the $http service there is section called JSON Vulnerability Protection that suggests that Angular takes a few precautions to avoid an attack.

They recommend the reading of the following article: Anatomy of a Subtle JSON Vulnerability which as far as I can see delves into a case similar to yours.

Bottom line, I think you will have to return a full JSON object and not just a string. An alternative is to make sure you are getting a JSON object, by doing

$scope.value = JSON.parse(value)

answered Feb 4, 2014 at 18:40

Edwin Dalorzo

78.9k25 gold badges151 silver badges211 bronze badges

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

1 Comment

Jim Aho Over a year ago

JSON.parse() solved a similar issue for me. The response from the server seemed fine, however it did not work on the client, until I added a call to JSON.parse().

kingPuppy · Accepted Answer · 2014-09-03 21:51:57Z

2

The preferred (Angular provided solution) is

$scope.value = angular.fromJson(data);

answered Sep 3, 2014 at 21:51

kingPuppy

3,0771 gold badge20 silver badges18 bronze badges

Collectives™ on Stack Overflow

WebApi Method with single value and AngularJs $http json handling

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related