In AngularJS, the data is showing up only in ng-repeat

Question

I've got the following getUserData.js:

var App = angular.module('App', []);

App.controller('UserdataController', function($scope, $http) {
  $http.get('data/getUserData.php')
       .then(function(res){
          $scope.users = res.data;                
        });
});

Which works perfectly, a Json is created inside the getUserData.php file, nothing wrong with that. But when I want to display it inside the index.php file, I only get it to work using ng-repeat, like this:

<div ng-controller="UserdataController">
    <ul>
        <li ng-repeat="user in users">
            {{user.voornaam}}
        </li>
    </ul>
</div>

But how can I display this data ("voornaam" is dutch for first name) without using ng-repeat? I thought it should be something like this, but it doesn't work..

<div ng-controller="UserdataController">
    {{users.voornaam}}
</div>

Tried for several hours now, and searched all over the place. If someone can tell me what I'm doing wrong, that would be great!!

Answer 1

Well that's because users.vornaam just does not exists. However instead of showing an error Angular will just show a "blank value".

Check your object strucutre to understand your error. It will be something like

Users {
   0:{ vornaam: xyz, ...}, //this is a single "user" which has a vornaam attribute
   1:{ vornaam: xyz, ...},
   2:{ vornaam: xyz, ...}
}

As you can see your User s object/array itself just does not have a "vornaam" but consists of several objects which then have the requested attribute.

In the above example

Users.vornaam

will be undefined. But if you try to access it like

Users[0].vornaam

it will work.