How to print an array in table format using angularJS?

In JavaScript, data can be stored in the form of arrays. Each of the array items has unique indexing, starting from 0. But what if the developer wants to display all the items that are in the array, on the webpage. One possible way is to run a loop, starting from 0 up to the value of (array.length() – 1). However, this is not feasible while dealing with JSON data, where there might exist another array inside of an already existing array.

The best possible solution for this has been provided by AngularJS.
An array can be printed in tabular format using the ‘ng-repeat’ directive of AngularJS.
‘ng-repeat’ helps in looping through the items in the collection element. This directive is very helpful while dealing with a collection of objects.

Example 1:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<script src=
  </script>
<style>
    body {
        margin: 2%;
        font-size: 120%;
    }
      
    th,
    td {
        padding: 20px;
    }
</style>
  
<body ng-app="myApp" ng-controller="ListController">
    <h1>Most Grand Slam Winners - Men Tennis</h1>
    <table border=1>
        <thead>
            <tr>
                <th>S.No</th>
                <th>Name</th>
                <th>Country</th>
                <th>Grand Slams</th>
                <th>Active</th>
            </tr>
        </thead>
        <tr ng-repeat="item in itemsDetails">
            <td> {{item.sno}} </td>
            <td> {{item.name}} </td>
            <td> {{item.country}} </td>
            <td> {{item.grandslams}} </td>
            <td> {{item.active}} </td>
        </tr>
    </table>
  
</body>
<script>
    var app = angular.module('myApp', []);
    app.controller(
      'ListController', function($scope) {
  
        $scope.itemsDetails = [{
                sno: 1,
                name: 'Roger Federer',
                country: 'Switzerland',
                grandslams: 20,
                active: "Yes",
            }, {
                sno: 2,
                name: 'Rafael Nadal',
                country: 'Spain',
                grandslams: 18,
                active: "Yes",
            }, {
                sno: 3,
                name: 'Novak Djokovic',
                country: 'Serbia',
                grandslams: 16,
                active: "Yes",
            }, {
                sno: 4,
                name: 'Pete Samprass',
                country: 'USA',
                grandslams: 14,
                active: "No",
            }, {
                sno: 5,
                name: 'Roy Emerson',
                country: 'Australia',
                grandslams: 12,
                active: "No",
            }
  
        ];
  
    });
</script>
  
</html>

chevron_right


Output

Code Explanation:
The ‘ng-app’ and the ‘ng-controller’ of this application has been named ‘myApp’, and ‘ListController’ respectively.
In the <script>, an array named ‘itemsDetails’ has been created and stored in the scope variable. The array contains a list of the ‘Top 5 Grand Slam winners in Men’s Tennis’.

The main objective is to print this array data in tabular format.
The first step is to create a table using the ‘table’, ‘thead’, ‘tr’, ‘td’ tags. The table headings are set. The ng-repeat service of AngularJS to extract multiple records from the array.

The basic syntax of ‘ng-repeat’ is:

<div ng-repeat="x in list">
      {{x}}
</div>

In the example, the syntax has been modified as ng-repeat=”item in itemsDetails. Therefore, each item of the ‘itemsDetails’ will be identified as ‘item’. The JavaScript dot notation will be used to access information inside the array. For example, to access the information that is stored in ‘name’, the dot notation ‘itemsDetails.name’ will be used. The next step is to write that dot notation inside double brackets {{}}, for example; {{itemsDetails.name}}. AngularJS then resolves this expression and returns the desired result.

The ‘ng-repeat’ will run this process in a loop until all the array items are selected and are returned in the tabular format.

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<script src=
  </script>
    
<style>
    body {
        margin: 2%;
        font-size: 120%;
    }
      
    th,
    td {
        padding: 20px;
    }
</style>
  
<body ng-app="myApp" ng-controller="ListController">
    <h1>Superheroes and their Universe</h1>
    <table border=1>
        <thead>
            <tr>
                <th>Name</th>
                <th>Universe</th>
            </tr>
        </thead>
        <tr ng-repeat="item in itemsDetails">
            <td> {{item.name}} </td>
            <td> {{item.universe}} </td>
        </tr>
    </table>
  
</body>
<script>
    var app = angular.module('myApp', []);
    app.controller('ListController', function($scope) {
  
        $scope.itemsDetails = [{
                name: 'Batman',
                universe: 'DC',
            }, {
                name: 'Ant Man',
                universe: 'Marvel',
            }, {
                name: 'Superman',
                universe: 'DC',
            }, {
                name: 'Captain America',
                universe: 'Marvel',
            }, {
                name: 'Thor',
                universe: 'Marvel',
            }
  
        ];
  
    });
</script>
  
</html>

chevron_right


Output:

Code Explanation:
This example is very much similar to the previous example. In this case, we created an array and named it ‘itemsDetails’. We will store this array in the scope object. The ‘ng-repeat’ service will iterate through the array, get one item at a time from the array and then display it on the webpage in the tabular format.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.