遍历外部嵌套的 Json 以制作手风琴菜单

我的问题在理论上听起来很简单，但我在让菜单正常工作时遇到了很多麻烦。

正在发生的事情是，我可以像我想要的那样获取菜单项的标题，但我无法正确检索内部项，也无法正确显示它们。

这是我的Jquery：

$(document).ready(function(){

  $.getJSON( "externalJson.json", function( data ) {
     postData(data);
});
var html = '<ul>';
function postData(data){
   /* 
   How I want my menu to work in structure:
    <ul>
        <li>
            <h3><span>Header</span></h3>
            <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </li>
    </ul>
    */
    $.each(data, function(key, value){
        console.log(data[key].innerItem);
        html += "<li><h3><span>" + key + "</span></h3>";
        $.each(data[key].innerItem, function(i, j){
            console.log(j.item);
            html += "<ul>";
            html += "<li><a href=" + j.link + ">" + j.item + "</a></li>";
            html += "</ul>";
        });
        html += "</li>";
        html += "</ul>";
    });
    $('#accordian').append(html);
};

$("#accordian h3").click(function(){
    $("#accordian ul ul").slideUp();
    if(!$(this).next().is(":visible")){
        $(this).next().slideDown();
    }
});
});

这是我的 JSON 文件，它位于一个单独的文件中：

   {
  "ItemOne":
    {
     "innerItem":
            [{
                "item":"cat",
                "link":"http://www.google.com/"
            }]
    },
"ItemTwo":
    {
      "innerItem":
            [{
                "item":"kitten",
                "link":"http://www.google.com/"
            }]
    },
"ItemThree":
    {
     "innerItem":
            [{
                "item":"meow",
                "link":"http://www.google.com/"
            }]
    },
"ItemFour":
    {
       "innerItem":
            [{
                "item":"purr",
                "link":"http://www.google.com/"
            }]
    }
  }

如果你想看看我的所有代码，这里有一个链接：https://ide.c9.io/cherrysymphony/workspace#openfile-README.md

不太明白我需要做什么才能使代码正常工作，就像我将其硬编码到 html 中一样。