Trouble showing nested foreach in table

[John Olson]

I have two dropdowns of objects that can be added to via an input box. I have observables to capture the selected objects, and I need to add the latter object to an array in the first and then display all the objects in that array in successive rows below a row of the parent object. I can't seem to get the array objects to display at all and I can't figure out why. 

JSFiddle

I've checked in the console and the tasks are being added to the tasks array within the job object correctly but they aren't showing up in the table as rows as intended. I imagine it's a scope issue, but I can't seem to figure it out. I'm fairly new to JavaScript and knockout.js so the problem isn't obvious to me I suppose.

All help is appreciated!

Johnny

[John Olson]

Better JSFiddle

[Noirabys]

hi,
check your variable names -> tasks vs. taskList

best regards,

 noirabys

[Noirabys]

and there is no tasks property in the job if you may access the parent context using $parent.taskList

[Andrew Vickers]

Noirabys is correct.

From looking over the code, it's not clear whether you are trying to implement a one-to-many or many-to-many relationship between jobs and tasks, as it's half implemented each way.  Resolving that will fix the view model issues.  (If it's 1-2-many, remove all task variables from the view model and instantiate them in the job object.  Otherwise, consider carefully how you will map the arrays of jobs and tasks, and whether this should be done in the view model or model.)

You will also want to review the documentation for the foreach binding, specifically regarding containerless syntax.  You will need to use containerless syntax to get the table to display properly.

Cheers