어떻게이 자바 스크립트 배열을 구문 분석 하시겠습니까?

Question

나는 이와 유사한 객체와 자바 스크립트 배열을 분석하려고 :

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

이 구조는 하나 기존보다 훨씬 더 자연스러운 표현이다.