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：）

Answer 2

这就是我想出的：http://jsfiddle.net/XE6Nw/

function makeMenu(data) {
    var html = "<ul>";
    $.each(data,function(key,val){
        html += "<li>";
        if (typeof val === "object")
           html +=  key + makeMenu(val);
        else
           html += val;
        html += "</li>";
    });
    html += "</ul>";
    return html;
};

$(makeMenu(data)).appendTo("body");

根据需要将上述内容插入到$.getJSON()成功回调中。并且，显然，附加到适当的元素 - 我只是附加到正文，以便在上面的jsfiddle中进行测试。

Answer 3

你真的不需要使用jQuery来实现这一点。我要做的是一个函数并使用一些递归（你可以在这里测试它：http://jsfiddle.net/ramsvidor/GvR7x/）：

function createMenu(items) {
    var menu = document.createElement('ul'),
        i, item;

    for (i in items) {
        if (i != '__proto__' && items[i]) {
            item = document.createElement('li');

            if (typeof(items[i]) === 'object') {
                item.textContent = i;
                item.appendChild(createMenu(items[i]));
            } else {
                item.textContent = items[i];
            }

            menu.appendChild(item);
        }
    }

    return menu;
}

然后你可以使用jQuery追加到HTML元素。

var menu = { 
    Menu1: 'Item1',
    Menu2: {
        SubMenu1: 'SubItem1',
        SubMenu2: 'SubItem2'
    },
    Menu3: 'Item3',
    Menu4: {
        SubMenu2: {
            SubSubMenu1: 'SubSubItem1'
        }
    }
};

$('#someElement').html(createMenu(menu));

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

3 个答案: