knockout foreach numeric array

Question

i have this array:

[{"room_id":"1","room_name":"CDI","workers":[[{"worker_id":"12","worker_name":"FF","worker_grade":"Q2"},{"worker_id":"13","worker_name":"Test","worker_grade":"Q1"}],[{"worker_id":"12","worker_name":"FF","worker_grade":"Q2"},{"worker_id":"13","worker_name":"Test","worker_grade":"Q1"}],[],[],[{"worker_id":"13","worker_name":"Test","worker_grade":"Q1"}]]},{"room_id":"2","room_name":"DD","workers":[[],[],[],[{"worker_id":"12","worker_name":"FF","worker_grade":"Q2"},{"worker_id":"13","worker_name":"Test","worker_grade":"Q1"}],[]]}]

My problem is a loop in y viewmodel:

 <tbody data-bind="foreach: rooms">
            <tr>
                <th data-bind="text: room_name"></th>
                <!--ko foreach: workers-->
                <td>
                <!--ko foreach: 0-->
                <!--ko text: worker_name--><!--/ko-->
                    <!--/ko-->
                </td>
                <td>
                    <!--ko foreach: 1-->
                    <!--ko text: worker_name--><!--/ko-->
                    <!--/ko-->
                </td>
                <td>
                    <!--ko foreach: 2-->
                    <!--ko text: worker_name--><!--/ko-->
                    <!--/ko-->
                </td>
                <td>
                    <!--ko foreach: 3-->
                    <!--ko text: worker_name--><!--/ko-->
                    <!--/ko-->
                </td>
                <td>
                    <!--ko foreach: 4-->
                    <!--ko text: worker_name--><!--/ko-->
                    <!--/ko-->
                </td>
                <!--/ko-->
            </tr>
        </tbody>

Because the arrays after workers aren't associative, I can't cycle through it. But how can I now go through it and display the other arrays like:

[{"worker_id":"12","worker_name":"Adriaan Wind","worker_grade":"Q2"},{"worker_id":"13","worker_name":"Test","worker_grade":"Q1"}]

The solution above doesn't work.

Answer 1

I think you need to add name like "rooms" for room binding and "workers" for the workers related bindings. And then you can bind your details in following manner

  ko.applyBindings( { "rooms" : [{ "room_id":"1","room_name":"CDI", "workers":[{"worker_id":"12", "worker_name":"FF", "worker_grade":"Q2"}, {"worker_id":"13", "worker_name":"Test", "worker_grade":"Q1"} ]} ]}); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script> <div data-bind="foreach: rooms"> Room <span data-bind="text:room_name "></span> <div data-bind="foreach: workers"> Worker: <span data-bind="text: worker_name"></span><hr/> </div> </div>