How to Push an Object Into an Array in Angular
This article will discuss pushing an object into an array using AngularJS. We will do this with the help of the push() method.
The push() method is a built-in method in AngularJS that inserts an object into an existing array. It takes two arguments: the object to push and the index of the position to insert the object.
The first argument is the object that will be pushed into the array and should be of type string, number, boolean, or null.
The second argument is the index at which to insert this new element relative to where it was inserted before. For example, if you want to insert a unique string after an apple, you would use 1 and if you’re going to insert it before, then use -1.
The Push API enables sending a message from a server to a client, and the Notifications API allows the message to show after it was received at the browser. However, we can’t send notifications directly from our server to the web computer.
Steps to Push an Object Into an Array in Angular
The push() method accepts an object or array and inserts it at the end of the collection.
The first step is to create a new empty array and have a length of two. This is because the push() method can only insert one object or element at a time.
The second step is to create an object with two properties: Name and Age. This will be the object we want to insert into our new array.
Finally, we need to call our new array’s push() method with our newly created object as an argument. The push() method will insert this object into our new array at its last index, which in this case would be 0 (zero).
Example of Pushing an Object Into an Array in Angular
Let’s discuss an understandable example with the help of the steps mentioned above to get a better idea of how to push an object into an array using AngularJS.
HTML code:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="demo">
<form ng-controller="Sample as test" ng-submit="test.addText(test.myText)">
<input type="text" ng-model="test.myText" value="food">
<button type="submit">Add</button>
<div ng-repeat="item in test.arrayadd">
<span>{{item}}</span>
</div>
</form>
</body>
</html>
JavaScript code:
var app = angular.module('demo', []);
app.controller('Sample', function($scope) {
this.arrayadd = [{
text: 'Name',
}, {
text: 'Age'
}, ]
this.addText = function(text) {
if (text) {
var obj = {
text: text
};
this.arrayadd.push(obj);
this.myText = '';
}
}
});
Click here to check the live demonstration of the mentioned above code.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook