jquery - jqueryを使用したJsonメガメニュー

Question

jQueryでマークアップ/ネストを正しく取得しようとしています。

メガメニューを作成するjsonフィードがあります。レイアウトの例を複製しようとしています。

<ul>
   <li class="top-level"><a href="">Home</a></li>
   <li class="top-level"><a href="">Find your holiday</a>
        <ul class="heading">
            <li class="heading"><a href="">Destinations</a></li>
            <li class="heading"><a href="">Latest ski deals</a></li>
            <li class="heading"><a href="">Where to stay</a></li>
        </ul>
   </li>
</ul>

JSON からのスニペット

{
    "navigation": [
            {
                    "title": "Home",
                    "link": ""
 },
            {
                    "title": "Find your ski holiday",
                    "link": "#URLhere",
                    "headingArray": [
                            {
                                    "heading": [
                                            {
                                                    "title": "Destinations",
                                                    "link": "#URLhere",
                                                    "subheading": [
                                                            {
                                                                    "title": "Andorra",
                                                                    "link": "#URLhere"
},
                                                            {
                                                                    "title": "Austria",
                                                                    "link": "#URLhere"
},

これが私が取り組んできたjsfiddleですhttp://jsfiddle.net/imshuffling/wC9VG/7/

jquery を html に正しいネストでラップするのに問題があります。

更新 前にはっきりしていなかった場合はお詫びします。アイテムが正しい順序で表示されています。ラッピング要素を手伝ってくれる人はいますか?まだ問題があります。

 <li class="top-level"><a href="">Find your holiday</a>
        <ul class="heading">
            <li class="heading"><a href="">Destinations</a></li>
            <li class="heading"><a href="">Latest ski deals</a></li>
            <li class="heading"><a href="">Where to stay</a></li>
        </ul>
   </li>

更新されたhttp://jsfiddle.net/imshuffling/wC9VG/12/