Using .push() on a $scope array of Objects doesn't add the pushed object to the array

Question

I'm trying to accept user input from a form. I can successfully access the input and can print the data from the object to the console, but when I attempt to push this object to the array of Objects I have stored in the controller, it doesn't work.

Here is a small snippet of my code:

$scope.dogs = [
    {
      name: "Blinky",
      age: "2",
      owner: "Martha Franklin",
      vaccinated: "Y"
    },
    {
      name: "Spot",
      age: "4",
      owner: "Martha Franklin",
      vaccinated: "Y"
    }];

$scope.dog = {
      name: "",
      age: "",
      owner: "",
      vaccinated: ""
    };

$scope.savePet = function(){
  //console.log($scope.dog.name); This prints the name in the input HTML form
  $scope.dogs.push($scope.dog); //THIS DOESN'T STORE IN THE INFORMATION
};

Like I stated previously, I am attempting to push an object onto the end of an array of objects and it just isn't working. This is all happening within the controller of an AngularJS module.

What do you mean with "it just isn't working"? Can I assume that the dog you are expecting does not show up in a view? This code looks ok. — lex82
– lex82, Commented Jul 16, 2015 at 7:31

Amar Gohil · Accepted Answer · 2015-07-16 05:11:51Z

3

$scope.dogs = [
{
  name: "Blinky",
  age: "2",
  owner: "Martha Franklin",
  vaccinated: "Y"
},
{
  name: "Spot",
  age: "4",
  owner: "Martha Franklin",
  vaccinated: "Y"
}];

  $scope.dog = {
  name: "john",
  age: "44",
  owner: "rocky",
  vaccinated: "n"
};

$scope.savePet = function(){
 console.log($scope.dog.name); 
 $scope.dogs.push($scope.dog); //THIS DOESN'T STORE IN THE INFORMATION
 console.log($scope.dogs); 
 };

$scope.dog value is null so that it is not working... add value in $scope.dog. your code is Fine.

answered Jul 16, 2015 at 5:11

Amar Gohil

1633 silver badges12 bronze badges

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

Comments

Prashanth · Accepted Answer · 2015-07-16 06:26:11Z

0

The reason is you are trying to add the same object to the array. Array doesn't take the same object. One need to create a new object or replicate (copy) to make it work.

answered Jul 16, 2015 at 6:26

Prashanth

595 bronze badges

Comments

NiRUS · Accepted Answer · 2015-07-16 07:26:05Z

I dont see why this not working for you. I created a JS fiddler to simulate your code and its perfectly working.

http://jsfiddle.net/nirus/vgxg7yzz/2/

Code:

function DogController($scope) {
    $scope.dogs = [
    {
      name: "Blinky",
      age: "2",
      owner: "Martha Franklin",
      vaccinated: "Y"
    },
    {
      name: "Spot",
      age: "4",
      owner: "Martha Franklin",
      vaccinated: "Y"
    }];

$scope.dog = {
      name: "",
      age: "",
      owner: "",
      vaccinated: ""
    };

$scope.savePet = function(){      
      $scope.dogs.push($scope.dog); //THIS DOESN'T STORE IN THE INFORMATION
      console.log($scope.dogs[2]);
    };
}

HTML:

<div ng-app ng-controller="DogController">
    <div>Hello open your console to see the result</div>
    <input type="submit" ng-click="savePet()" value="Click Me"></input>   
</div>

Result: See the below. enter image description here

Suggestion: If its still not working i would suggest you to fork the above code and modify accordingly and post back so that we can have a better look at it.

Collectives™ on Stack Overflow

Using .push() on a $scope array of Objects doesn't add the pushed object to the array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related