Saving nested data via angular

Question

I'm trying to save the contents of a form into a hierarchical data structure:

$scope.milestones = [
    {milestoneName: "milestone 1",
    id:"milestoneOne",
    headingID:"headingOne",
    panelClass:"in",
    tasks:[
        {
        taskSubject:"Get cost agreement confirmation",
        category:"#7FFF00",
        dueDate:"July 5, 2015",
        repeat: true,
        assignee:"Jiman Ilitad",
        estHours:"3"},
        {
        taskSubject:"Get cost agreement confirmation",
        category:"#7FFF00",
        dueDate:"July 5, 2015",
        repeat: true,
        assignee:"Jiman Ilitad",
        estHours:"3"}
    ]}
];

I'm using ng-repeat to display milestones and then within each of the milestones I have tasks. Each milestone can have one or more tasks added to it via a basic html form where each input corresponds with a value in the push.

Here is the script which defines the push:

$scope.addTask = function(index){
    $scope.milestones.tasks.push({
        taskSubject: $scope.index.formTaskSubject,
        category: $scope.index.formCategory,
        dueDate: $scope.index.formDate,
        repeat: $scope.index.formRepeat,
        assignee: $scope.index.formAssignee,
        estHours: $scope.index.formEstTime
        })
    };

I'm currently getting an error: TypeError: Cannot read property 'push' of undefined

tavnab · Accepted Answer · 2015-06-29 17:22:52Z

2

This error means that you're trying to call the method push on something that doesn't exist. Since $scope.milestones is an array, you need to specify which element in that array you're trying to add a task to.

Based on your plunker, you just need to call addTask() with an additional parameter specifying the index of the milestone you wish to modify.

In your ng-click, pass in an index to the milestone. For example, change:

<a class="btn btn-primary" ng-click="addTask()">Save</a>

To:

<a class="btn btn-primary" ng-click="addTask($index)">Save</a>

The above assumes that $index is the index to your $scope.milestones array, which is assigned by ng-repeat="milestone in milestones". It can easily change if you nest ng-repeats, breaking your code.

To avoid this, just pass the milestone object itself directly into addTask.

In your HTML:

<div ... ng-repeat="milestone in milestones" ...>
  ...
  <a ... ng-click="addTaskTo(milestone)" ...>Save</a>
  ...

In your controller:

$scope.addTaskTo = function(milestone) {
  milestone.tasks.push(...);

edited Jun 29, 2015 at 17:22

answered Jun 26, 2015 at 15:49

tavnab

2,7541 gold badge21 silver badges27 bronze badges

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

4 Comments

featherz Over a year ago

I decided to create a plunk to make it a little easier to communicate. I made this change and now get the same error for tasks. plnkr.co/edit/YmlBuu?p=preview clicking save within "milestone 1" under the "add task" button will produce the error

tavnab Over a year ago

Thanks @featherz, the plunker helps. Notice that in your ng-click="addTask()" you're not passing in any parameters, yet function addTask(milestoneIndex) { ... } expects a parameter. addTask($index) is the value for ng-click you need, but the way the page is structured makes it easy for this to break (not enough room in comments to explain why). Consider passing in the milestone object itself instead of an index to an array.

featherz Over a year ago

I thought I had this all figured out but can't seem to get it to post form data contents back to the page. It posts empty data even when the form is filled in. Any ideas? plnkr.co/edit/3dEnBkYS502DxnAPFefg?p=preview

tavnab Over a year ago

It has to do with scopes & in which scope your form fields are defined. $scope refers to your controller's scope, but ng-repeat="milestone in milestones" creates a new scope for each milestone. So, $scope.formDate doesn't exist because there are multiple formDates, one for each milestone. You need to pass in each of those values form values into addTask (plnkr.co/edit/PAij6n1YBr0z2IuqeYf9?p=preview). Or if you're brave, you can try creating a custom directive for your milestone panel :)

Collectives™ on Stack Overflow

Saving nested data via angular

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related