如何解析這個javascript數組？

我試圖解析與對象JavaScript數組，與此類似：如何解析這個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]，就好像你必須翻轉索引。

我希望我已經夠清楚了，非常感謝你們，任何推薦或想法都會得到真正的讚賞，這是一個問題，一直給我幾個錯誤，我無法解決。

謝謝！

來源

2012-09-21 Leandro Cusack

有使用jQuery這裏的答案： http://stackoverflow.com/questions/5833683/jquery-looping-over-arrays – Lukos

我試圖避免的jQuery，導致結構被媒體鏈接定義，它不能改變，我必須使用純粹的JavaScript，它是一個大老古董，包括jQuery將是一場災難，因爲它使用了奇怪的原型版本... thnaks的幫助！ –

你不需要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);

這假定你不會在菜單下有多個子菜單。這似乎不太可能。

如果在菜單下實際上可能有幾個子菜單，那麼可以創建一個子菜單Array。

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")));

這個結構比現有的結構更自然。

來源

2012-09-21 14:53:43

如何解析這個javascript數組？

回答

相關問題