JS Knockout - Multidimensional Observed Arrays and Submatrix Data Mapping

Question

I am close to this, and I realized that it will be simple, however, there must be something missing ...

I have a multidimensional array in ko.observableArray in which like this:

Site → Company → Work

For my data bindings, data-bind="text: Site().Name" is suitable, as you would expect. However, I cannot access the sub-arrays using data-bind="text: Site().Company().Name" or data-bind="text: Site().Company.Name" .

Has anyone else had the same problem, or is there something that I am doing extremely wrong? Objects are 100% loaded into the array correctly, as I see them in the console.

Answer 1

If I understand your problem correctly, and Site contains an observable array of Company objects, and each Company object contains an object of an observable Job object, then your approach will not work.

data-bind="text: Site().Company().Name" tries to get the Name property of the observed array containing Company objects. However, you could write data-bind="text: Site().Company()[0].Name" to get the name of the first Company .

A more general approach would be to iterate over the elements. Sort of:

 <!-- ko with: Site --> Site name is <span data-bind="text: Name"/> <ul> <!-- ko foreach: Company --> <li>Company name is <span data-bind="text: Name"/> <!-- ko foreach: Job --> <li>Job name is <span data-bind="text: Name"/> </li> <!-- /ko --> </li> <!-- /ko --> </ul> <!-- /ko --> 

See http://knockoutjs.com/documentation/foreach-binding.html for more details.

Hope this is what you are looking for and sorry if I misunderstood your question.