How to print an array in table format using angularJS?

Last Updated : 12 Sep, 2022

Given an array & the task is to print the given array in the tabular 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: This example illustrates the rendering of the array in the tabular form using the ng-repeat directive in AngularJS.

HTML

<!DOCTYPE html>
<html>

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
  
    <style>
        body {
            margin: 2%;
            font-size: 120%;
        }

        th,
        td {
            padding: 20px;
        }
    </style>
</head>

<body ng-app="myApp" ng-controller="ListController">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>Printing the array in the tabular format</h3>
    <h4>Most Grand Slam Winners - Men Tennis</h4>
    <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>

Explanation: The 'ng-app' and the 'ng-controller' of this application have 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.

Output:

The main objective is to print this data in an array 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 extracts multiple records from the array.

Syntax of 'ng-repeat':

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

Example 2: In the below example, the syntax has been modified as ng-repeat="item in itemsDetails. Therefore, each item of the 'itemsDetails' will be identified as an '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 returned in the tabular format.

HTML

<!DOCTYPE html>
<html>

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>

    <style>
        body {
            margin: 2%;
            font-size: 120%;
        }

        th,
        td {
            padding: 20px;
        }
    </style>
</head>

<body ng-app="myApp" ng-controller="ListController">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>Printing the array in the tabular format</h3>
    <h4>Superheroes and their Universe</h4>
    <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>

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.