$http.get request gets string instead of json on success (Angular JS)

Question

The controller returns data, however I can't iterate over it in the HTML file. However using the expression {{phones}} directly displays the data returned. I believe the data is being returned as a string instead of json. I am expecting the names and snippets corresponding to all the data returned in the loop.

<body ng-app="phonecatApp" ng-controller="PhoneListCtrl" >
    Search: <input ng-model="query">
    Sort By:
    <select ng-model="orderByFilter">
        <option value="name">Alphabetical</option>
        <option value="age">Numerical</option>
    </select>
    <ul>
        <li ng-repeat="phone in phones | orderBy:orderByFilter">
            <span>{{phone.name}}</span>
            <span>{{phone.snippet}}</span>
        </li>
    </ul>

    <script src="~/Scripts/AngularScript.js"></script>

</body>

Angular js script

var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {
    $http.get('Home/GetJson').success(function (data){        
        $scope.phones = data;
    });
});

Controller Action method

public JsonResult GetJson()
        {
            string variablename = "[{'name': 'Nexus S','snippet': 'Fast just got faster with Nexus S.', 'age': 1}]";
            return Json (variablename, JsonRequestBehavior.AllowGet);                
        }

krivtom · Accepted Answer · 2015-09-20 06:31:13Z

2

Since you already have a data in JSON format, you don't need to use method Json, because it serializes the object once again under the covers. You can use method Content instead:

public ActionResult GetJson()
{
    string variablename = "[{'name': 'Nexus S','snippet': 'Fast just got faster with Nexus S.', 'age': 1}]";
    return Content(variablename);
}

Alternatively instead of providing hardcoded data you can create an object, and allow method Json to serialize the object:

public ActionResult GetJson()
{
    var resultObject = new object [] {
        new {
            name="Nexus S",
            snippet= "Fast just got faster with Nexus S.", 
            age= 1
        }
    };
    return Json (resultObject, JsonRequestBehavior.AllowGet);                
}

edited Sep 20, 2015 at 6:31

answered Sep 20, 2015 at 6:25

krivtom

25k10 gold badges53 silver badges54 bronze badges

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

Comments

MysterX · Accepted Answer · 2015-09-20 10:55:50Z

0

You can also fix this issue on the client side. Just parse response before setting it to phones

$scope.phones = JSON.parse(data);

answered Sep 20, 2015 at 10:55

MysterX

2,3781 gold badge14 silver badges12 bronze badges

Comments

vtortola · Accepted Answer · 2015-09-20 13:38:28Z

0

The problem maybe that you are passing the content as String because it is already serialized into JSON rather than an Object.

You can return that content this way:

public ActionResult GetJson()
{
    string variablename = "[{'name': 'Nexus S','snippet': 'Fast just got faster with Nexus S.', 'age': 1}]";
    return Content (variablename, "application/json");                
}

However, the best option would be to pass an object and let Json() serialize it as @dotnetom indicated in this answer.

answered Sep 20, 2015 at 13:38

vtortola

36.1k33 gold badges169 silver badges270 bronze badges

Collectives™ on Stack Overflow

$http.get request gets string instead of json on success (Angular JS)

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related