Knockout.js nested foreach

Question

I have a list of key value pairs (KVP) and I want to list 2 KVPs in every table row. From my limited Knockout knowledge, I figured that if I have an array of arrays, then I can use a nested foreach to achieve this.

jsfiddle code here.

But this is not outputting table cells as expected. What is wrong?

edit: updated fiddle link

Answer 1

It's seems I didn't understand your question. However, I'll leave this up in case you were curious how to display the phone numbers.

---

Your foreach should go on the tbody tag: http://jsfiddle.net/Vcwv6/4/

Also, I add a virtual element.

<!-- ko foreach: phones -->
<td>
    <select data-bind="value: type, options: $root.types"></select>
    <input data-bind='value: number' />
</td>
<!-- /ko -->

Answer 2

Use:
KVPairs: ko.observableArray(filter.KVPairs)