javascript - jQuery JSON循环遍历嵌套对象以创建菜单

Question

我有这个 JSON 字符串，我正在使用 $.getJSON:

{
    "Menu1":"Item1",
    "Menu2": {
        "SubMenu1":"SubItem1",
        "SubMenu2":"SubItem2"
    },
    "Menu3":"Item3",
    "Menu4": {
        "SubMenu2": {
            "SubSubMenu1":"SubSubItem1"
        }
    }
}

我怎样才能遍历来表示一个菜单，例如:

<ul>
    <li>Item1</li>
    <li>Menu2
        <ul>
            <li>SubItem1</li>
            <li>SubItem2</li>
        </ul>
    </li>
    <li>Item3</li>
    <li>Menu4
        <ul>
            <li>SubMenu2
                <ul>
                    <li>SubSubItem1</li>
                </ul>
            </li>
        </ul>
     </li>
</ul>

Answer 1

这应该可以解决问题；

function buildNode(key, val) {
  var html="";
  if(typeof val === 'string') {
    html+= '<li>'+val+'</li>';
  }
  else { //assumtion: if it isn't a string it's an object
    html+= '<li>'+key +'<ul>';
    for(var subkey in val) {
      html+= buildNode(subkey, val[subkey]);
    }
    html+= '</ul></li>';
  }
  return html;
}

//assumtion: url serves the json string in question
$.getJSON(url,function(data) {

var html = '<ul>';
for(var key in data) {
  html+= buildNode(key, data[key]);
}
html+='</ul>';

//the variable html now  hold the html you are looking for
});

注意:这可以通过在循环中使用 hasOwnProperty 并进行更严格的类型检查等来更“正确”地完成，但我将把它留给 OP :)