1
我必須將JSON文件轉換爲特殊格式的樹。
將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);
非常感謝，我怎麼可能沒有想過使用參數節點^^前。 – Lodec
但是，第一個節點：「myProject」沒有顯示進分區:( – Lodec
沒錯，這是因爲帶子的迭代樣式。 –