CODEWITHSUNDEEP
phpangularjsarraysjsonangularjs-ng-repeat
TheGarden
TheGarden

Reputation: 191

Angularjs: Displaying array of objects

For the life of me I cannot extract and print out the data in my array. I've generated JSON in PHP and I've wired up Angularjs to retrieve this data. The Angularjs development tool within Chrome is telling me that I have a variable "user" that is an array of objects (see below) when I run the code. I made user a rootScope variable "$rootScope.user = data;" so I can get at it. I'm a newb so none of this is probably best practice.

{ 
    user : [{"user_id":"1","firstname":"John","lastname":"Doe","email":"[email protected]","age":"29","height":"74.5","weight":"200","gender":"M","birthdate":"2013-12-31","username":"john.doe","hash":"$2a$10$MECYLWuu6AwRxzBF\/CUys.AuqVm7Lf4BYRGezeusvLe6wNTkU3FEy"}]
}

This is the ng-repeat I use on the same page that shows the above "user" is within its scope:

<ul id="biometrics" ng-repeat="info in user">
     <li>Age: {{info.age}}</li>
</ul>

What am I doing wrong? Perhaps what am I NOT doing wrong. I'm new to Angularjs to say the least.

I tried what was suggested but to no avail. I just want to try and clarify my code/situation just to be sure I didn't screw up. I think I may have been unclear as this is also my first time posting on StackOverflow.

This is literally what my login.php file returns:

[{"user_id":"1","firstname":"John","lastname":"Doe","email":"[email protected]","age":"29","height":"74.5","weight":"200","gender":"M","birthdate":"2013-12-31","photoURL":"john.doe.jpg","username":"john.doe","hash":"$2a$10$MECYLWuu6AwRxzBF/CUys.AuqVm7Lf4BYRGezeusvLe6wNTkU3FEy"}]

This is my login controller:

app.controller("LoginController", ['$scope', '$rootScope', '$http', '$location', function($scope, $rootScope, $http, $location) {
    $scope.errorMessage = "Wrong password or username";

    $scope.login = function() {

        $http({
            url: "./login.php",
                method: "POST",
                data: { cache: false, username: $scope.username, password: $scope.password },
                headers : {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'} 
            }).success(function(data, status, headers, config) {
                $rootScope.user = data;
                $location.path('/dashboard');
            }).error(function(data, status, headers, config) {
                $scope.statusMessage = status;
                alert($scope.errorMessage);
        });
    }
}]);

This is in my view HTML:

<ul id="biometrics" ng-repeat="info in user">
    <li>Age: {{info}}</li>
</ul>

I get nothing when I try this and I tried data.user and got nothing.

Upvotes: 3

Views: 12124

Answers (3)

Aleksey Ratnikov
Aleksey Ratnikov

Reputation: 569

If you put data to $rootScope like this:

$rootScope.user = data;

Then you should prefix model in view with $root like this:

<ul id="biometrics" ng-repeat="(property, value) in $root.user[0]">
    <li>{{property}}: {{value}}</li>
</ul>

Upvotes: 1

jlee
jlee

Reputation: 474

your data is an array with 1 element (an object literal) and needs to be referenced as an array.

1 quick fix you can do in your $http.success callback:

$rootScope.user = data[0]; /* <-- notice the "[0]" to reference it as an array */

Now you can reference your data in the html like this:

<ul id="biometrics" ng-repeat="info in user">
    <li>Age: {{info.age}}</li>
</ul>

Upvotes: 0

Gilsha
Gilsha

Reputation: 14591

Try this.

Hope this one will help

     <ul ng-repeat="(key,value) in user[0]"> 
            <li>{{key}} : {{value}}</li>      
     </ul>

Upvotes: 0

Related Questions