---

Search posts under AngularJS:

---

List from JSON collection in AngularJS

How to list data from JSON collection in AngularJS?

To list data from JSON collection, we again shall use ng-repeat directive.

In below code snippet, we have declared a members variable that contains the JSON data, collection of 4 records. Next, we have declared a module and created a MemberController. In the controller, we have set the Members property of the $scope to the members JSON collection.

<script>
    var members = [
            { username: 'SheoNarayan', address: 'Hyderabad' },
            { username: 'Munna', address: 'Bokaro' },
            { username: 'Jay', address: 'Aurangabad' },
            { username: 'Sreeni', address: 'New York' }
    ];

    var app = angular.module("app", []);
    app.controller("MemberController", ["$scope", function ($scope) {
        $scope.Members = members;
    }]);

</script>

<div ng-app="app">
    <h4>Listing item from the collection</h4>
    <div ng-controller="MemberController">
        <ul>
            <li ng-repeat="member in Members">
                {{$index + 1}}.  Name: {{member.username }} | Address: {{ member.address}}
            </li>
        </ul>
    </div>
</div>

In the HTML part, we have ng-app and ng-controller referring the module and controller defined. Inside the ng-repeat directive, we have also used {{$index + 1}} expression to list record number. $index gives the 0 based index value of the record  in the collection. After index, we haved used member.username and member.address (the properties of the record declared in the JSON collection) to list the respective field data.

Output