AngularJS Example

HTML

<div ng-app="App">
  <div ng-controller="friendsCtrl">
    <pre>Data: {{friends | json}}</pre>
      
    <p>
      {{friends[0].id}}
    </p>
      
    <div>
        John is {{friends[0].name}} and has id {{friends[0].id}}<br/>
        Mary is {{friends[2].name}} and has id {{friends[2].id}}<br/>
        Peter is {{friends[3].name}} and has id {{friends[3].id}}<br/>
    </div>
      
    <p>
        Joy is {{friends[joy].name}} and has id {{friends[joy].id}}<br/>
    </p>
    
    <p>
        Peter is <input type="text" ng-model='getFriend(9).name'> and has id {{getFriend(9).id}}<br/>
    </p>

  </div>
</div>

CSS

</style> <!-- Ugly Hack to make remote files preload in jsFiddle --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular-animate.min.js"></script>

JavaScript

angular.module('App', []);
function friendsCtrl($scope) {
$scope.friends = [
    {'id':1, 'name':'John', 'age':25},
    {'id':2, 'name':'Joy', 'age':15},
    {'id':7, 'name':'Mary', 'age':28},
    {'id':9, 'name':'Peter', 'age':33}
  ];
    
    // You can define variables for the indexes
    $scope.john = 0;
    $scope.joy = 1;
    $scope.mary = 2;
    $scope.peter = 3;

    // You can define a lookup function for the array (typically the best choice)    
    $scope.getFriend = function(fid) {

        angular.forEach($scope.friends, function(friend, key) {
            if (friend.id == fid) {
                found = friend;
            }
        });
        return found;
    };
    
};