AngularJS: Displaying JSON Object Content on Client Side

Question

I am trying to display the content of a JSON object. On the client side, I am using ng-repeat to iterate through the object name Users to get the ID, Name, and Password. However, I am only getting '[object Object] on the client side instead of the expected values.

//The controller that I am using
 myApp.controller('userController', function ($scope,$http /*UserService*/) {
      //  $scope.Users = [];
        $http.get('/Templates/ListUsers')
        .success(function (data) {
            // $scope.Users = data.data;
            if (data.Ok) {
                $scope.Users = JSON.stringify(data.data);
                console.log($scope.Users);
            }
        }).error(function(error){
            console.log(error);
        });

//The form where the data is supposed to display. 

<div class="row">
       <div class="form-group">
           <li ng-repeat="x in Users"> 
               {{ x.ID, x.Name, x.Password  }}
           </li>
       </div>
   </div>   

//The JSON object based on the line console.log($scope.Users);
{"Ok":true,"data":[{"ID":1,"Name":"Name1","Password":"Password1"}, 
{"ID":2,"Name":"Name2","Password":"Password2"}
,{"ID":3,"Name":"Name3","Password":"Password3"},
{"ID":4,"Name":"Name4","Password":"Password4"}],"message"
 :"Success"}

Below is the same example in plunker, and it works.

http://plnkr.co/edit/btL2QMyHxhDLH7cxZ1YV?p=info

Pankaj Parkar · Accepted Answer · 2015-10-05 17:33:52Z

2

You shouldn't be stringify the JSON.

$scope.Users = data.data;

You should use string concatenation while showing output.

<li ng-repeat="x in Users"> 
     {{ x.ID +','+ x.Name +','+ x.Password  }}
</li>

edited Oct 5, 2015 at 17:33

answered Oct 5, 2015 at 17:14

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

3 Comments

Jean B Over a year ago

It still giving me [object Object]. I did data.data because the actual object looks like this: {"Ok":true,"data":[{"ID":1,"Name":"Name1","Password":"Password1"},{"ID":2,"Name":"Name2","Password":"Password2" },{"ID":3,"Name":"Name3","Password":"Password3"},{"ID":4,"Name":"Name4","Password":"Password4"}],"message" :"Success"}

Pankaj Parkar Over a year ago

@JeanB ok then you should use $scope.Users = data.data without stringify

Jean B Over a year ago

I tried the same example in plunker, and it works. I had to make some small changes such as adding .html to the templatUrl and remove htmlModle(true).

Collectives™ on Stack Overflow

AngularJS: Displaying JSON Object Content on Client Side

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