AngularJs - push Object in array

Question

I can't understand how to push object into an array I tried few different ways and still can't figured it out.

var app = angular.module('myApp',[])
app.controller('dropdown', function($scope, $http){
	$scope.userInfo = [];
	
	$scope.pushInArray = function() {
		$scope.userInfo.push($scope.users)
	}

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="dropdown">

<input type="text" name="name" ng-model="users.name" placeholder="Name">
<input type="text" name="email" ng-model="users.email" placeholder="Email">
<input type="text" name="phoneNo" ng-model="users.phoneNo" placeholder="phone Number">
<button ng-click="pushInArray()">Add</button>
<pre>{{userInfo}}</pre>
</div>

at click of add button I push the users information in userInfo properities. I works on first time but If I modified the the value already stored value also modified(after push value is modifying).

Pengyy · Accepted Answer · 2017-04-24 03:52:26Z

2

try angular.copy, this will copy the exist object with a new instance.

var app = angular.module('myApp',[])
app.controller('dropdown', function($scope, $http){
	$scope.userInfo = [];
	
	$scope.pushInArray = function() {
    var user = angular.copy($scope.users);
		$scope.userInfo.push(user);
	}

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="dropdown">

<input type="text" name="name" ng-model="users.name" placeholder="Name">
<input type="text" name="email" ng-model="users.email" placeholder="Email">
<input type="text" name="phoneNo" ng-model="users.phoneNo" placeholder="phone Number">
<button ng-click="pushInArray()">Add</button>
<pre>{{userInfo}}</pre>
</div>

answered Apr 24, 2017 at 3:52

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aayushi Jain · Accepted Answer · 2017-04-24 03:25:19Z

1

You need to empty yours users before setting it to new values:

$scope.userInfo = [];

$scope.pushInArray = function(data) {
    $scope.userInfo.push(data)
    $scope.users = null;
}

HTML:

<input type="text" name="name" ng-model="users.name" placeholder="Name">
<input type="text" name="email" ng-model="users.email" placeholder="Email">
<input type="text" name="phoneNo" ng-model="users.phoneNo" placeholder="phone Number">
<button ng-click="pushInArray(users)">Add</button>
<pre>{{userInfo}}</pre>

Here is the working Plnkr

answered Apr 24, 2017 at 3:25

Aayushi Jain

2,8792 gold badges31 silver badges37 bronze badges

9 Comments

vinox Over a year ago

Its working fine, Is there any way to do without making users properities as null

Aayushi Jain Over a year ago

Why you don't want to set it to null?

vinox Over a year ago

just I want to know is there any way

Mike Tung Over a year ago

@AayushiJain yea I forgot to null it haha nice answer bud :)

Aayushi Jain Over a year ago

@vinox: I don't think you can make it without setting it to null as the name/email/phoneNo values will persist in users unless you reinitialize them

|

Mike Tung · Accepted Answer · 2017-04-24 03:52:22Z

0

You need to pass the object to the scope function to persist it.

var app = angular.module('myApp',[])
app.controller('dropdown', function($scope, $http){
    $scope.userInfo = [];

    $scope.pushInArray = function(data) {
        var entry = (JSON.parse(JSON.stringify(data)));
        $scope.userInfo.push(entry);
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="dropdown">

<input type="text" name="name" ng-model="users.name" placeholder="Name">
<input type="text" name="email" ng-model="users.email" placeholder="Email">
<input type="text" name="phoneNo" ng-model="users.phoneNo" placeholder="phone Number">
<button ng-click="pushInArray(users)">Add</button>
<pre>{{userInfo}}</pre>
</div>

edited Apr 24, 2017 at 3:52

answered Apr 24, 2017 at 3:18

Mike Tung

4,8411 gold badge19 silver badges25 bronze badges

5 Comments

vinox Over a year ago

same thing happening after first value push If I modified input text value pushed object value also modified

Mike Tung Over a year ago

yea I forgot to add the $scope.users = null to clear it as per @Aayushi's answer

vinox Over a year ago

can I know the reason why stringify the data and again parse the data

vinox Over a year ago

instead of doing, you can use default angular function angular.copy to achieve. refer @Pengyy answer

Mike Tung Over a year ago

It's just if you wanted to do vanilla JavaScript

Collectives™ on Stack Overflow

AngularJs - push Object in array

3 Answers 3

Comments

9 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

9 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related