In the previous example, we saw how to access an simple Array in AngularJs. In this tutorial we are going to understand how to handle array of objects in AngularJs. Here is the example to create an object in AngularJS.

Creating Object in AngularJs :

$scope.student= {
    sId: 1001, sName: "chandra shekhar", sAddress: "Hyderabad", marks: [65, 85, 68, 75, 72, 97]
}

Above is the example snippet to represent an object in AngularJs. Here Student is an object and sId, sName, sAddress and marks are the properties of student object.

$scope is an object of AngularJs, which refers to the application’s model.

Bind the student details with view. ng-controller directive is used to bind the view with Angular controller.

[html]

<table ng-controller="studentCotroller">
        <tr>
            <td>StudentId</td>
            <td>StudentName</td>
            <td>StudentAddress</td>
            <td>StudentMarks</td>
        </tr>
        <tr>
            <td>{{student.sId}}</td>
            <td>{{student.sName}}</td>
            <td>{{student.sAddress}}</td>
            <td><ul></ul><li ng-repeat="mark in student.marks">{{mark}}</li></ul></td>
        </tr>
</table>

[/html]

On the above ng-controller is the AngularJs directive. It attaches a AngularJS controller to the view.

Complete Example :

[html]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Creating Object in AngularJs Example</title>
<script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.controller("studentCotroller", function($scope) {
        $scope.student = {
                sId:1001,
                sName:"chandra shekhar",
                sAddress:"Hyderabad",
                marks:[65,85,68,75,72,97]
                
        }
    })
</script>
</head>
<body ng-app="myApp">
    <h1>Student Marks List</h1>
    <table ng-controller="studentCotroller">
        <tr>
            <td>StudentId</td>
            <td>StudentName</td>
            <td>StudentAddress</td>
            <td>StudentMarks</td>
        </tr>
        <tr>
            <td>{{student.sId}}</td>
            <td>{{student.sName}}</td>
            <td>{{student.sAddress}}</td>
            <td><ul></ul><li ng-repeat="mark in student.marks">{{mark}}</li></ul></td>
        </tr>
    </table>
</body>
</html>

[/html]

Output :

array of objects in AngularJsAbove is the example to create an single object and accessing the object in AngularJs.

Array of Objects in AngularJs :

Creating array of Objects :

$scope.products=[ {
    prodId: 1001, prodName: "iPhoe6", prodPrice: "65,000 INR",
}

,
{
    prodId: 1002, prodName: "iPhone5", prodPrice: "50,000 INR",
}

,
{
    prodId: 1003, prodName: "iPhone6s", prodPrice: "1,20,000 INR",
}

]

On the above, we created products object, which consists of multiple products information.

Example for Array of Objects in AngularJs :

[html]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example for Array of Objects in AngularJs </title>
<script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.controller("productCotroller", function($scope) {
        $scope.products = [ {
            prodId : 1001,
            prodName : "iPhoe6",
            prodPrice : "65,000 INR",
        }, {
            prodId : 1002,
            prodName : "iPhone5",
            prodPrice : "50,000 INR",
        }, {
            prodId : 1003,
            prodName : "iPhone6s",
            prodPrice : "1,20,000 INR",
        } ]
    })
</script>
</head>
<body ng-app="myApp">
    <h1>Products Information</h1>
    <table ng-controller="productCotroller" border="2">
        <tr style="background-color:green">
            <td>Product Id</td>
            <td>Product Name</td>
            <td>Product Price</td>
        </tr>
        <tr ng-repeat="product in products">
            <td>{{product.prodId}}</td>
            <td>{{product.prodName}}</td>
            <td>{{product.prodPrice}}</td>
        </tr>
    </table>
</body>
</html>
[/html]

Output :

Example for Array of Objects in AngularJsThat’s it, Happy Learning 🙂

About the Author:

Founder of onlinetutorialspoint.com Love Java, Python, Shell and opensource frameworks. Follow him on twitter and facebook for latest updates.

One Comment

  1. Saurab November 3, 2020 at 1:11 pm - Reply

    I have not got waht I’m in search of ,

    My requirement is I have an array where data of GET Api is stored , it is in other component ,I want that data of array into the POJO class which i have created .

    Hope you will consider my difficulties which I’m facing .

Leave A Comment