Skip to content
Related Articles

Related Articles

Improve Article
How to print an array in table format using angularJS?
  • Last Updated : 30 Aug, 2019

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:




<!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>

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:




<!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>

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
Recommended Articles
Page :