Angular add characters to an array

Question

I m new to angular and i'm trying to make a add character form field but i'm doing something wrong

Here is my html form with angular

<form class="add_character" ng-submit="characterController.addCharacter(characters)">
          <input ng-model="addCharacterCtrl.character.name" type="text">
          <input ng-model="addCharacterCtrl.character.last_name" type="text">
          <input ng-model="addCharacterCtrl.character.age" type="text">
          <textarea ng-model="addCharacterCtrl.character.history" name="" id="" cols="30" rows="10"></textarea>
          <input type="submit">
      </form>

And here is my controller with my add character function in it:

app.controller('CharacterController', function() {
this.characters = personages;


this.addCharacter = function(newCharacter){
  addCharacter.push(this.characters);

  this.addCharacter = [];
};
  });



  var personages = [
{
  name: 'Character',
  last_name: 'character',
  age: 21,
  history: 'character info',
},
{
  name: 'Character2',
  last_name: 'character',
  age: 44,
  history: 'character info',
}


  ];

And this is the error i get:

Blockquote angular.js:13920 TypeError: Cannot read property 'push' of undefined at Object.addCharacter (addCharacter.js:11) at fn (eval at compile (angular.js:14817), :4:394) at b (angular.js:15906) at e (angular.js:25885) at m.$eval (angular.js:17682) at m.$apply (angular.js:17782) at HTMLFormElement. (angular.js:25890) at Sf (angular.js:3497) at HTMLFormElement.d (angular.js:3485)

I hope someone can help me

Inbar Azulay · Accepted Answer · 2016-12-07 14:00:01Z

2

You have to make addCharacter and Array like [], instead of an Object like {}.

So write:

this.addCharacter = [];

instead of:

this.addCharacter = {};

answered Dec 7, 2016 at 14:00

Inbar Azulay

2871 gold badge6 silver badges28 bronze badges

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

5 Comments

Ovidiu Dolha Over a year ago

Also: you are using "addCharacter" as a variable, a function and a param name! Use a different name for the var and a different one for the param (also the param is not used, so you might want to use it instead of push(this.addCharacter) push(myParam)

Balachandran Over a year ago

Look that code again this.addCharacter overwrite by function this.addCharacter =function(), and addCharacter is getting from html ng-submit="character.addCharacter(characters)"

Balachandran Over a year ago

@Jessep so problem is in html "character.characters" should be pass as argument or correct controller name with characters

Jessep Over a year ago

im really struc now i have this now:

Inbar Azulay Over a year ago

@Jessep firstly create the array before you start pushing stuff into it.

LGLab · Accepted Answer · 2016-12-07 14:45:16Z

1

As answered before the error you are getting is because you are trying to push an object into another object so change it to an array

Also your markup and code are a little overdone for what is required, here is a simplified version:

app.controller('CharacterController', function($scope) {

  // The initial list of characters
  // Here I declare the personages as a scope variable as I am listing them in the view (see plunker below), but you could just declare it as a normal variable
  $scope.personages = [ 
    { name: 'Character', last_name: 'character', age: 21, history: 'character info'},
    { name: 'Character2', last_name: 'character', age: 44, history: 'character info'}
  ];

  // An object to hold the new character data, use this in your form model
  $scope.newCharacter = {};

  // The form submit function which receives its model
  $scope.addCharacter = function(character) {
    $scope.personages.push(character);
  }
});

<form class="add_character" ng-submit="addCharacter(newCharacter)">
      <input ng-model="newCharacter.name" type="text">
      <input ng-model="newCharacter.last_name" type="text">
      <input ng-model="newCharacter.age" type="text">
      <textarea ng-model="newCharacter.history" name="" id="" cols="30" rows="10"></textarea>
      <input type="submit">
    </form>

Preview here:

https://plnkr.co/edit/iDVPdKm7d96XR1Sk6uQh?p=preview

edited Dec 7, 2016 at 14:45

answered Dec 7, 2016 at 14:34

LGLab

561 silver badge4 bronze badges

1 Comment

Jessep Over a year ago

it works now !! thank you for the comments to explain the code too i learned alot!

Gregg · Accepted Answer · 2016-12-07 14:06:54Z

1

Here are a few things I see:

this.addCharacter = {};

You initialized addCharacter as an object.

this.addCharacter = function(addCharacter){ addCharacter.push(this.personages); };

Next you redefine it as a function.

addCharacter.push(this.personages);

Finally, you are trying to use Array.push to insert the character into an object. Also, you are using the same variable name in the method signature for addCharacter.

answered Dec 7, 2016 at 14:06

Gregg

6577 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular add characters to an array

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related