Question

我试图用对象解析javascript数组，类似于：

function Obj(MenuText, stuff, someStuff) {
    this.text = MenuText;
    this.stuff = stuff;
        this.someStuff = someStuff;
}

myArray[0] = new Array();
myArray[0][1] = new Obj('MenuText', 'A', 'F');
myArray[0][2] = new Obj('MenuText2', 'A', 'F');
myArray[1] = new Array();
myArray[1][1] = new Obj('Submenu Option', 'A', 'F');
myArray[2] = new Array();
myArray[2][1] = new Obj('Submenu Option', 'A', 'F');

我需要的是以一种我可以用这种方式创建列表的方式来解析数组：

<ul>
<li>MenuText
<ul>
<li>Submenu Option</li>
</ul>
</li>
<li>MenuText2
<ul><li>Submenu Option2</li></ul>
</li>
</ul>

因此，菜单项的菜单选项包含在下一个主要位置，例如，菜单项4的按钮将位于myArray [0] [3] .MenuText，但将显示的选项位于myArray [3] [1 ... N]，就像你必须反转索引一样。

我希望我已经足够清楚了，非常感谢你们，任何推荐或想法都会非常感激，这是一个给我带来一些错误而我无法解决的问题。

谢谢！

Answer 1

你不需要jQuery，但是你的对象结构看起来很奇怪。

将子菜单嵌套在对象结构中更有意义，就像它们嵌套在DOM结果中一样。

var myArray = [];

function Obj(MenuText, stuff, someStuff) {
    this.text = MenuText;
    this.stuff = stuff;
    this.someStuff = someStuff;
}

myArray[0] = new Obj('MenuText', 'A', 'F');
myArray[0].submenu = new Obj('Submenu Option', 'A', 'F');

myArray[1] = new Obj('MenuText2', 'A', 'F');
myArray[1].submenu = new Obj('Submenu Option', 'A', 'F');

然后创建一个迭代数组的递归函数，并在找到子菜单时进行递归调用。

function makeMenu(menu, parent) {
    var li = parent.appendChild(document.createElement("li"));
    li.appendChild(document.createTextNode(menu.text));

    if (menu.submenu)
        makeMenu(menu.submenu, li.appendChild(document.createElement("ul")));
}

var container = document.body.appendChild(document.createElement("ul"));

for (var i = 0; i < myArray.length; i++)
    makeMenu(myArray[i], container);

这假定您在菜单下不会有多个子菜单。这似乎不太可能。

如果菜单下实际上有几个子菜单，你可以制作一个子菜单数组。

function Obj(MenuText, stuff, someStuff) {
    this.text = MenuText;
    this.stuff = stuff;
    this.someStuff = someStuff;
    this.submenus = []; // holds the sub menus
}

myArray[0] = new Obj('MenuText', 'A', 'F');
myArray[0].submenus.push(new Obj('Submenu Option', 'A', 'F'));

myArray[1] = new Obj('MenuText2', 'A', 'F');
myArray[1].submenus.push(new Obj('Submenu Option', 'A', 'F'));

稍微更改一下代码。

function makeMenus(menus, parent) {
    for (var i = 0; i < menus.length; i++) {
        var li = parent.appendChild(document.createElement("li"));
        li.appendChild(document.createTextNode(menus[i].text));

        makeMenus(menus[i].submenus, li.appendChild(document.createElement("ul")));
    }
}

makeMenus(myArray, document.body.appendChild(document.createElement("ul")));

这种结构比现有结构更自然。

如何解析这个javascript数组？

1 个答案: