CODEWITHSUNDEEP
javascriptarraysangularjs
user1808372
user1808372

Reputation: 41

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

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.

Upvotes: 2

Views: 159

Answers (3)

NiRUS
NiRUS

Reputation: 4259

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.

Upvotes: 0

Prashanth
Prashanth

Reputation: 59

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.

Upvotes: 0

Amar Gohil
Amar Gohil

Reputation: 163

$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.

Upvotes: 3

Related Questions