Array Of Objects In AngularJs | Object in AngularJs | AngularJS E

PROGRAMMINGJava ExamplesC Examples
Java Examples
C Examples
C Tutorials
aws
JAVAEXCEPTIONSCOLLECTIONSSWINGJDBC
EXCEPTIONS
COLLECTIONS
SWING
JDBC
JAVA 8
SPRING
SPRING BOOT
HIBERNATE
PYTHON
PHP
JQUERY
PROGRAMMINGJava ExamplesC Examples
Java Examples
C Examples
C Tutorials
aws
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.
$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.
[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]
Above is the example to create an single object and accessing the object 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.
[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]
That’s it, Happy Learning 🙂

Angular Module Example Tutorials
Using Array in AngularJs Example
AngularJs Filters Example Tutorials
AngularJs lowercase Filter Example
AngularJs Currency Filter Example
AngularJs Orderby Filter Example
AngularJs Search Filter Example
Angularjs Custom Filter Example
Angularjs Services Example Tutorials
AngularJs Custom Service Example
AngularJs Custom Directive Example
AngularJs Directive Example Tutorials
AngularJs Data Binding Example
Steps to Create AngularJs Controller
Step by Step Tutorials AngularJs Example

Angular Module Example Tutorials
Using Array in AngularJs Example
AngularJs Filters Example Tutorials
AngularJs lowercase Filter Example
AngularJs Currency Filter Example
AngularJs Orderby Filter Example
AngularJs Search Filter Example
Angularjs Custom Filter Example
Angularjs Services Example Tutorials
AngularJs Custom Service Example
AngularJs Custom Directive Example
AngularJs Directive Example Tutorials
AngularJs Data Binding Example
Steps to Create AngularJs Controller
Step by Step Tutorials AngularJs Example






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 .










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 .




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 .