angularjs json parsing issue

Question

Using an ajax request I receive the following json data:

{ 
    "status" : "success", 
    "xplist" : [
        { "rank" : "1", "username" : "test1", "xp" : "2500" },
        { "rank" : "2", "username" : "test2", "xp" : "2200" },
        { "rank" : "3", "username" : "test3", "xp" : "1900" }
     ]
 }

In my controller I created empty data variable

 $scope.data = {};

And assign the json data to it like this:

$scope.data.xpresult = data;

Then in my view I try to use ng-repeat to get the items out:

<li ng-repeat="xp in data.xpresult.xplist">                                             
     <div class="listItem">
         <div class="left">                                                          
             <p>{{xp.rank}}</p>
         </div>              
         <div class="middle">
             <p style="padding: 8px 46px 0px 0px;margin:0">{{xp.username}}</p>
             <p style="margin:0px">{{xp.xp}}</p>
          </div>          
    </div>
</li>

I also tried the to repeat the following instead:

data.xpresult.0.xplist

Also tried to put the data in a variable and stringify the result again:

var xpdata = JSON.parse(data);
$scope.data.xpresult = JSON.stringify(xpdata.xplist);

But unfortunately this didn't work either.

Can anyone give me a pointer on how to get this out properly or what I am doing wrong?

Update

The controller is as following:

angular.module('AndriodApp')

.controller('ExperienceController', function($scope,md5){

$scope.data = {};

$scope.getTop50 = function(uid,uname) {
    var token = md5.createHash("test"+uid+uname+"test");
    var postdata = { messagetype: "getexperience", userid: uid, securitytoken: token };
    $.post("http://127.0.0.1/backend/jiomsg.php",postdata)
        .done(function( data ) {
            alert( "Data Loaded: " + data );
            $scope.data.xpresult = data;
    });
}

$scope.getTop50("1","Gerard");
});

may be data.xpresult.data.xplist. if "data" is from promise. — YOU
– YOU, Commented Jun 27, 2015 at 15:42
Where is your $http request defined ? Can you show us the call with $scope.data.xpresult = data; Are the HTML template & $scope assignment into same Ctrl? your html seems good (big code) — aorfevre
– aorfevre, Commented Jun 27, 2015 at 15:45

JB Nizet · Accepted Answer · 2015-06-27 16:00:43Z

2

You're sending a request and receiving a response behind the back of AngularJS, which has no idea you have modified the scope, and that the expressions in the page should thus be reevaluated.

Use the $http service, and everything will go fine:

$http.post("http://127.0.0.1/backend/jiomsg.php", postdata)
    .success(function(data) {
        alert( "Data Loaded: " + data );
        $scope.data.xpresult = data;
    });

Or, if using jquery is really necessary for whatever reason, make sure angular knows about the received response:

$.post("http://127.0.0.1/backend/jiomsg.php",postdata)
    .done(function( data ) {
        alert( "Data Loaded: " + data );
        $scope.data.xpresult = data;
        $scope.$apply();
});

answered Jun 27, 2015 at 16:00

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

3 Comments

Gerard van den Bosch Over a year ago

I used jquery because the $http.post didn't return any data. I tried your snippet there as well but it returns empty. I have added the $scope.$apply(); but it still won't display. Am I missing something else?

JB Nizet Over a year ago

Use the debugger and inspect the value of data. Is it anobject or is it a string? If it is a string, you'll have to parse it with angular.fromJson().

Gerard van den Bosch Over a year ago

Thanks a lot, that did the trick. It was indeed a string that needed to convert to json.

Collectives™ on Stack Overflow

angularjs json parsing issue

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related