CODEWITHSUNDEEP
javascriptjqueryajaxasp.net-mvcangularjs
wojciech_rak
wojciech_rak

Reputation: 2346

ASP MVC basic AJAX Json request returns null

I have an MVC application with a controller named Angular (I use AngularJS as well), which has an action called GetQuestion. That action returns a JsonResult which looks like this (grabbed from Chrome):

{"game":{"Title":"Diablo III","ImgPaths":["d31.jpg","d32.jpg"]},"Answers":["Diablo III","World of Tanks","Need for Speed"]}

My JS function is like this:

var request = $.ajax({
    url: "/Angular/GetQuestion",
    dataType: "json",
    type: "post",
    success: (function (data) { alert(data); })
});

But instead of the Json I wrote above, alert window only says [object Object]

Update

Ok, that was fixed, thaks. However as you may suspect, my goal is not to present this data in alert box, but use it somehow. So here's my controller in Angular

function QuestionCtrl($scope) {

var request = $.ajax({
    url: "/Angular/GetQuestion",
    dataType: "json",
    type: "post",
    success: function (data) {
        $scope.answers = JSON.stringify(data.Answers);
        $scope.imgPath = JSON.stringify(data.game.ImgPaths[0]);
    }
});

}

And then the view:

<div ng-controller="QuestionCtrl">

<img class="quizImage" src="~/Gallery/{{imgPath}}"/>
@using (Html.BeginForm("Answer", "Angular", FormMethod.Post))
{
    <p ng-repeat="answer in answers"><input type="radio" name="game"  value="{{answer}}"/> {{answer}}</p>
    <p><input type="submit" value="Answer"/></p>
}
</div>

And I don't have neither image or the questions. If I hardcode them in controller then it's ok.

Upvotes: 0

Views: 1005

Answers (4)

frosty
frosty

Reputation: 21762

For starters... when ever you are dynamically building the src url for an image (using the {{expression}} syntax from Angular) you need to not use the "src" attribute and use the "ng-src" angular directive. It allows angular time to process your url before the image is loaded.

Upvotes: 1

wojciech_rak
wojciech_rak

Reputation: 2346

I resolved my second problem like this:

function QuestionCtrl($scope, $http) {

$http.post('/Angular/GetQuestion',null).success(function(data) {
    $scope.answers = data.Answers;
    $scope.imgPath = data.game.ImgPaths[0];
    //console.log($scope.answers);
    //console.log($scope.imgPath);
});

}

Note that it's AngularJS.

Upvotes: 2

Stephen King
Stephen King

Reputation: 836

An alert will show that, i would suggest using console.log(data)

var request = $.ajax({
url: "/Angular/GetQuestion",
dataType: "json",
type: "post",
success: (function (data) { console.log(data); })
 });

or as the comments states: 

var request = $.ajax({
url: "/Angular/GetQuestion",
dataType: "json",
type: "post",
success: (function (data) { alert(JSON.stringify(data)); })
 });

Upvotes: 2

Stokedout
Stokedout

Reputation: 11055

The reason it's happening is because JSON is an Object in JavaScript. When you type

alert(data);

It will attempt to cast the object to a string which in this case will only output that fact that it's an Object.

To view the contents of an object you can write a simple function to use with an alert or console.log.

function outputProperties(anObject) {
    var props = '';
    for (var prop in anObject) {
        props += '\n' + prop + ' value: ' + anObject[prop];
    }
    return props;
}

And use it like this

alert(outputProperties(data));

Upvotes: 1

Related Questions