Knockout.jsを使ってメニュー画面を作りたい

Question

前提・実現したいこと

Knockout.jsでメニュー画面を作成しています。

現在のコードだと
hoge1 hogehoge1 hogehoge2 hogehoge3 hogehoge4
hoge2 hogehoge1 hogehoge2 hogehoge3 hogehoge4
と表示されてしまいますが、

hoge1 hogehoge1 hogehoge2 hogehoge3
hoge2 hogehoge4
と表示させたいです。
どなたかお力添えいただけないでしょうか。

該当のソースコード

    <!-- ko foreach: $root.testArray -->
            <div>
              <span data-bind="text:Aname"></span>
              <ul>
              <!-- ko foreach: $parent.testArray -->
                <li>
                  <span data-bind="text:Bname"></label>
                </li>
	          <!-- /ko -->
              </ul>
            </div>
    <!-- /ko -->

    self.testArray = ko.observableArray();
     $.getJSON('hogehoge', function(data) {
        self.testArray(data);
    });

[
	{
		"Aname": "hoge1",
		"Bname": "hogehoge1"
	},
	{
		"Aname": "hoge1",
		"Bname": "hogehoge2"
	},
	{
		"Aname": "hoge1",
		"Bname": "hogehoge3"
	},
	{
		"Aname": "hoge2",
		"Bname": "hogehoge4"
	}
]

補足情報（FW/ツールのバージョンなど）

Knockout.js 3.4.0
HTML5