Angular. Push array in array

Question

I try to do TODO list using Angular.js I have function addTask, but it dosen't work. I try to give it project and than get array of tasks. In Chrome I see this mistake "Cannot read property 'tasks' of undefined" This is my app.js

    var app = angular.module('toDoList', ['ngDialog']);
        app.controller('MainCtrl', [
          '$scope',
          '$rootScope',
          'ngDialog',
          function($scope, $rootScope, ngDialog){
      $scope.test = 'Hello world!';

    $scope.projects = [
      {id: '1', title: 'For Home', tasks: [ {title: 'task 1', done:false }, {title: 'task 2', done: false }]},
      {id: '2', title: 'For Work', tasks: [ {title: 'task 1', done:false }, {title: 'task 2', done: false }]}
    ];

    $scope.addProject = function(){
      if(!$scope.title || $scope.title === '') { return; }
      $scope.projects.push({
        title: $scope.title
      });
    };

    $scope.addTask = function(project){

      $scope.project.tasks.push({
        title: $scope.tasktitle, done: false
      });
}]);

This is my html code

    <body ng-app="toDoList" ng-controller="MainCtrl">
  <div class="project" ng-repeat="project in projects">
    <span class="title">{{project.title}}</span>
      <form name="frm" ng-submit="addTask(project)">
        <input 
          type="text" 
          class="form-control" 
          placeholder="Start to type task"
          ng-model="tasktitle">
        <span class="input-group-btn">
          <button class="btn btn-default" type="submit">Add Task</button>
        </span>
      </form>
    <ul class="todo-list">             
      <li ng-repeat="task in project.tasks">
        <input type="checkbox" ng-model="task.done">
        <span ng-class="{done:task.done}">{{task.title}}</span>
      </li>
    </ul>
  </div>
</body>

How can I push my data about task?

This is doesn't work:

$scope.addTask = function(project){

  $scope.project.tasks.push({
    title: $scope.tasktitle, done: false
  });

};

Pangolin · Accepted Answer · 2015-01-18 21:54:06Z

2

First and foremost, you're missing an 's' in $scope.project.tasks.push. It should be projects, so as to match up with the scope variable.

Second, you're not actually choosing a project to push to. $scope.projects is an Array. You would need to choose an index to push to. Here's what I think you're going for:

HTML

<form name="frm" ng-submit="addTask(project.id, tasktitle)">

Javascript

$scope.addTask = function(id, task){

  $scope.projects[id].tasks.push({
    title: task
    , done: false
  });

};

EDIT: Working codepen at: codepen.io/Pangolin-/pen/YPVwye – Pangolin

edited Jan 18, 2015 at 21:54

answered Jan 17, 2015 at 17:42

Pangolin

1763 bronze badges

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

2 Comments

Ivan Prokopenko Over a year ago

unfortunately it does not work( The same error: "Cannot read property 'tasks' of undefined"

Pangolin Over a year ago

I've made a working Codepen for you. There were a couple syntax errors and the Array was not zero-based, so I changed the tasks to match up with them. Should work now! codepen.io/Pangolin-/pen/YPVwye

Ivan Prokopenko · Accepted Answer · 2015-01-18 19:26:31Z

0

I could fix this, but i don't know is it right?

HTML

<form name="frm" ng-submit="addTask(project.tasks, tasktitle)" class="input-group">

Javascript

   $scope.addTask = function(project, value){
   project.push({
    title: value
  });

answered Jan 18, 2015 at 19:26

Ivan Prokopenko

131 silver badge4 bronze badges

1 Comment

André Werlang Over a year ago

When you refer addTask() from the view, you're passing a tasks array and a string. It should match the addTask() signature: function(tasks, title). Then update your code to tasks.push(...)

Collectives™ on Stack Overflow

Angular. Push array in array

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related