2016-10-21 4 views
1

JSON 파일을 특수 div의 트리로 변환해야합니다.
JSON을 Javascript 개체로 변환하는 것은 문제가되지 않지만 내 div에 트리를 표시하는 재귀 함수와 관련된 몇 가지 문제가 발생합니다.
작동 방식 : 내 재귀 함수를 사용하면 콘솔에 모든 하위 항목을 표시 할 수 있습니다.
: 첫 번째 하위 항목을 div에 표시 할 수 있으며 첫 번째 하위 항목의 하위 항목은 표시 할 수 없습니다. 그 문제는 "appendChild"메서드에서 발생한다고 생각합니다.

도와 주시면 감사하겠습니다.

JSON 코드 :트리를 만드는 재귀 함수

{ 
    "dir":"", 
    "name":"myProject", 
    "type":"folder", 
    "children":[ 
    { 
     "dir":"myProject", 
     "name":"css", 
     "type":"folder", 
     "children":[ 
     { 
      "dir":"myProject/css", 
      "name":"main.css", 
      "type":"file" 
     }, 
     { 
      "dir":"myProject/css", 
      "name":"menu.css", 
      "type":"file" 
     }, 
     { 
      "dir":"myProject/css", 
      "name":"user.css", 
      "type":"file" 
     } 
     ] 
    }, 
    { 
     "dir":"myProject", 
     "name":"fonts", 
     "type":"folder" 
    }, 
    { 
     "dir":"myProject", 
     "name":"images", 
     "type":"folder", 
     "children":[ 
     { 
      "dir":"myProject/images", 
      "name":"logo.png", 
      "type":"file", 
      "corrupted":true 
     } 
     ] 
    }, 
    { 
     "dir":"myProject", 
     "name":"index.html", 
     "type":"file" 
    }, 
    { 
     "dir":"myProject", 
     "name":"js", 
     "type":"folder", 
     "children":[ 
     { 
      "dir":"myProject/js", 
      "name":"controllers", 
      "type":"folder", 
      "children":[ 
      { 
       "dir":"myProject/js/controllers", 
       "name":"core", 
       "type":"folder", 
       "children":[ 
       { 
        "dir":"myProject/tempjs/controllerslates/core", 
        "name":"menu.js", 
        "type":"file" 
       } 
       ] 
      }, 
      { 
       "dir":"myProject/js/controllers", 
       "name":"errors", 
       "type":"folder", 
       "children":[ 
       { 
        "dir":"myProject/js/controllers/errors", 
        "name":"error.js", 
        "type":"file" 
       } 
       ] 
      }, 
      { 
       "dir":"myProject/js/controllers", 
       "name":"home", 
       "type":"folder", 
       "children":[ 
       { 
        "dir":"myProject/js/controllers/home", 
        "name":"homePage.js", 
        "type":"file" 
       } 
       ] 
      }, 
      { 
       "dir":"myProject/js/controllers", 
       "name":"home", 
       "type":"folder", 
       "children":[ 
       { 
        "dir":"myProject/js/controllers/user", 
        "name":"list.js", 
        "type":"file" 
       }, 
       { 
        "dir":"myProject/js/controllers/user", 
        "name":"login.js", 
        "type":"file" 
       }, 
       { 
        "dir":"myProject/js/controllers/user", 
        "name":"profile.js", 
        "type":"file" 
       }, 
       { 
        "dir":"myProject/js/controllers/user", 
        "name":"subscribe.js", 
        "type":"file" 
       } 
       ] 
      } 
      ] 
     }, 
     { 
      "dir":"myProject/js", 
      "name":"libs", 
      "type":"folder", 
      "children":[ 
      { 
       "dir":"myProject/js/libs", 
       "name":"handlebars.min.js", 
       "type":"file" 
      }, 
      { 
       "dir":"myProject/js/libs", 
       "name":"jquery.min.js", 
       "type":"file" 
      }, 
      { 
       "dir":"myProject/js/libs", 
       "name":"require.min.js", 
       "type":"file", 
       "corrupted":true 
      } 
      ] 
     }, 
     { 
      "dir":"myProject/js", 
      "name":"main.js", 
      "type":"file" 
     }, 
     { 
      "dir":"myProject/js", 
      "name":"models", 
      "type":"folder", 
      "children":[ 
      { 
       "dir":"myProject/js/models", 
       "name":"menu.js", 
       "type":"file" 
      }, 
      { 
       "dir":"myProject/js/models", 
       "name":"user.js", 
       "type":"file" 
      }, 
      { 
       "dir":"myProject/js/models", 
       "name":"users.js", 
       "type":"file" 
      } 
      ] 
     } 
     ] 
    }, 
    { 
     "dir":"myProject", 
     "name":"ressources", 
     "type":"folder" 
    }, 
    { 
     "dir":"myProject", 
     "name":"views", 
     "type":"folder", 
     "children":[ 
     { 
      "dir":"myProject/templates", 
      "name":"core", 
      "type":"folder", 
      "children":[ 
      { 
       "dir":"myProject/templates/core", 
       "name":"footer.html", 
       "type":"file" 
      }, 
      { 
       "dir":"myProject/templates/core", 
       "name":"header.html", 
       "type":"file" 
      }, 
      { 
       "dir":"myProject/templates/core", 
       "name":"menu.html", 
       "type":"file" 
      } 
      ] 
     }, 
     { 
      "dir":"myProject/templates", 
      "name":"errors", 
      "type":"folder", 
      "children":[ 
      { 
       "dir":"myProject/templates/errors", 
       "name":"error401.html", 
       "type":"file" 
      }, 
      { 
       "dir":"myProject/templates/errors", 
       "name":"error403.html", 
       "type":"file" 
      }, 
      { 
       "dir":"myProject/templates/errors", 
       "name":"error404.html", 
       "type":"file", 
       "corrupted":true 
      } 
      ] 
     }, 
     { 
      "dir":"myProject/templates", 
      "name":"home", 
      "type":"folder", 
      "children":[ 
      { 
       "dir":"myProject/templates/home", 
       "name":"homePage.html", 
       "type":"file" 
      } 
      ] 
     }, 
     { 
      "dir":"myProject/templates", 
      "name":"home", 
      "type":"folder", 
      "children":[ 
      { 
       "dir":"myProject/templates/user", 
       "name":"list.html", 
       "type":"file" 
      }, 
      { 
       "dir":"myProject/templates/user", 
       "name":"login.html", 
       "type":"file" 
      }, 
      { 
       "dir":"myProject/templates/user", 
       "name":"profile.html", 
       "type":"file" 
      }, 
      { 
       "dir":"myProject/templates/user", 
       "name":"subscribe.html", 
       "type":"file" 
      } 
      ] 
     } 
     ] 
    } 
    ] 
} 

내 JS 코드 :

var treeModule; 

treeModule = document.getElementById("json").innerHTML; 
treeModule = JSON.parse(treeModule); 
console.log(treeModule); 


function Recursive(objetJS, isFirstParent) { 
    var list = document.createElement("ul"); 

    for(let child of objetJS.children) { 
     var item = document.createElement("li"); 
     item.innerHTML = child.name; 
     item.setAttribute('type', child.type); 
     console.log(child.name); 

     if(typeof(child.children) == "object") { 
      Recursive(child, false); 
     } 
     list.appendChild(item); 
    } 
    if(list.parentElement != null) { 
     item.appendChild(list); 
    } 
    if(isFirstParent == true) { 
     var htmlElement = document.getElementById("html"); 
     htmlElement.innerHTML = ''; 
     htmlElement.appendChild(list); 
    } 
} 
Recursive(treeModule, true); 

답변

1

내가 내용을 추가하는 함수를 노드를 제공하는 것이 좋습니다. 재귀의 경우 다음 호출을 위해 실제 노드를 가져옵니다.

function recursive(object, node) { 
 
    var list = document.createElement("ul"); 
 
    for (let child of object.children) { 
 
     var item = document.createElement("li"); 
 
     item.innerHTML = child.name; 
 
     item.setAttribute('type', child.type); 
 
     if (typeof(child.children) == "object") { 
 
      recursive(child, item); 
 
     } 
 
     list.appendChild(item); 
 
    } 
 
    if (list.parentElement != null) { 
 
     item.appendChild(list); 
 
    } 
 
    node.appendChild(list); 
 
} 
 

 
var treeModule = { dir: "", name: "myProject", type: "folder", children: [{ dir: "myProject", name: "css", type: "folder", children: [{ dir: "myProject/css", name: "main.css", type: "file" }, { dir: "myProject/css", name: "menu.css", type: "file" }, { dir: "myProject/css", name: "user.css", type: "file" }] }, { dir: "myProject", name: "fonts", type: "folder" }, { dir: "myProject", name: "images", type: "folder", children: [{ dir: "myProject/images", name: "logo.png", type: "file", corrupted: true }] }, { dir: "myProject", name: "index.html", type: "file" }, { dir: "myProject", name: "js", type: "folder", children: [{ dir: "myProject/js", name: "controllers", type: "folder", children: [{ dir: "myProject/js/controllers", name: "core", type: "folder", children: [{ dir: "myProject/tempjs/controllerslates/core", name: "menu.js", type: "file" }] }, { dir: "myProject/js/controllers", name: "errors", type: "folder", children: [{ dir: "myProject/js/controllers/errors", name: "error.js", type: "file" }] }, { dir: "myProject/js/controllers", name: "home", type: "folder", children: [{ dir: "myProject/js/controllers/home", name: "homePage.js", type: "file" }] }, { dir: "myProject/js/controllers", name: "home", type: "folder", children: [{ dir: "myProject/js/controllers/user", name: "list.js", type: "file" }, { dir: "myProject/js/controllers/user", name: "login.js", type: "file" }, { dir: "myProject/js/controllers/user", name: "profile.js", type: "file" }, { dir: "myProject/js/controllers/user", name: "subscribe.js", type: "file" }] }] }, { dir: "myProject/js", name: "libs", type: "folder", children: [{ dir: "myProject/js/libs", name: "handlebars.min.js", type: "file" }, { dir: "myProject/js/libs", name: "jquery.min.js", type: "file" }, { dir: "myProject/js/libs", name: "require.min.js", type: "file", corrupted: true }] }, { dir: "myProject/js", name: "main.js", type: "file" }, { dir: "myProject/js", name: "models", type: "folder", children: [{ dir: "myProject/js/models", name: "menu.js", type: "file" }, { dir: "myProject/js/models", name: "user.js", type: "file" }, { dir: "myProject/js/models", name: "users.js", type: "file" }] }] }, { dir: "myProject", name: "ressources", type: "folder" }, { dir: "myProject", name: "views", type: "folder", children: [{ dir: "myProject/templates", name: "core", type: "folder", children: [{ dir: "myProject/templates/core", name: "footer.html", type: "file" }, { dir: "myProject/templates/core", name: "header.html", type: "file" }, { dir: "myProject/templates/core", name: "menu.html", type: "file" }] }, { dir: "myProject/templates", name: "errors", type: "folder", children: [{ dir: "myProject/templates/errors", name: "error401.html", type: "file" }, { dir: "myProject/templates/errors", name: "error403.html", type: "file" }, { dir: "myProject/templates/errors", name: "error404.html", type: "file", corrupted: true }] }, { dir: "myProject/templates", name: "home", type: "folder", children: [{ dir: "myProject/templates/home", name: "homePage.html", type: "file" }] }, { dir: "myProject/templates", name: "home", type: "folder", children: [{ dir: "myProject/templates/user", name: "list.html", type: "file" }, { dir: "myProject/templates/user", name: "login.html", type: "file" }, { dir: "myProject/templates/user", name: "profile.html", type: "file" }, { dir: "myProject/templates/user", name: "subscribe.html", type: "file" }] }] }] }; 
 

 
recursive({ children: [treeModule] }, document.getElementById("tree"));
<div id="tree"></div>

+1

덕분에 내가 ^^ 전에 매개 변수의 노드를 사용하여 생각하지 수있는 방법을 많이. – Lodec

+0

그러나 첫 번째 노드 : "myProject"는 div에 표시되지 않습니다. ( – Lodec

+0

오른쪽, 어린이와 함께 반복되는 스타일 때문입니다.) –