[英]prevent nested for loops in javascript
這是我的 JSON 文件,我想創建沒有嵌套循環的 HTML 多級菜單
[{"text":"Home","href":"http://home.com","icon":"fas fa-home","target":"_top","title":"My Home"},{"text":"Posts","href":"","icon":"fas fa-bell","target":"_self","title":"","children":[{"text":"Sports","href":"","icon":"empty","target":"_self","title":""},{"text":"IT1","href":"","icon":"empty","target":"_self","title":""},{"text":"Web","href":"","icon":"","target":"_self","title":""},{"text":"About","href":"","icon":"fas fa-chart-bar","target":"_self","title":""}]}]
我寫了這個,但我認為這不是最好的方法,謝謝你的幫助
function MenuToHTML(JSON) {
let html = "<ul>";
for (items in JSON) {
html += "<li>";
//console.log(JSON[items].text);
html += JSON[items].text;
if (JSON[items].hasOwnProperty("children")) {
var child = JSON[items].children;
html += "<ul>";
for (subItems in child) {
html += "<li>";
html += child[subItems].text;
if (child[subItems].hasOwnProperty("children")) {
html += "<ul>";
var child = child[subItems].children;
for (SubsubItems in child) {
html += "<li>";
html += child[SubsubItems].text;
html += "</li>";
}
html += "</ul>";
}
html += "</li>";
}
html += "</ul>";
}
html += "</li>";
}
html += "</ul>";
return html;
}
您不需要像使用recursion
那樣創建嵌套循環,對於arrays
使用for..of
或forEach
而不是for..in
let arr = [ {"text":"Home","href":"http://home.com","icon":"fas fa-home","target":"_top","title":"My Home"}, {"text":"Posts","href":"","icon":"fas fa-bell","target":"_self","title":"","children": [{"text":"Sports","href":"","icon":"empty","target":"_self","title":""}, {"text":"IT1","href":"","icon":"empty","target":"_self","title":""}, {"text":"Web","href":"","icon":"","target":"_self","title":""}, {"text":"About","href":"","icon":"fas fa-chart-bar","target":"_self","title":""}]} ] /*this function will convert an array to html list. So you can pass the children array again to the same function and it will to convert children to html list*/ function MenuToHTML(JSON) { let html = "<ul>"; JSON.forEach(item => { html += `<li>${item.text}</li>`; if(item.children){ html += MenuToHTML(item.children); } }) return html + '</ul>'; } document.body.innerHTML = MenuToHTML(arr);
您可以構建真實元素並為嵌套子元素使用遞歸。
function getMenu(array) { return array.reduce((ul, { text, href, icon, target, title, children }) => { var li = document.createElement('li'), a; if (href) { a = document.createElement('a'); a.href = href; a.target = target; a.appendChild(document.createTextNode(text)); a.title = title; li.appendChild(a); } else { li.appendChild(document.createTextNode(text)); } if (children) { li.appendChild(getMenu(children)); } ul.appendChild(li); return ul; }, document.createElement('ul')); } var data = [{ text: "Home", href: "http://home.com", icon: "fas fa-home", target: "_top", title: "My Home" }, { text: "Posts", href: "", icon: "fas fa-bell", target: "_self", title: "", children: [{ text: "Sports", href: "", icon: "empty", target: "_self", title: "" }, { text: "IT1", href: "", icon: "empty", target: "_self", title: "" }, { text: "Web", href: "", icon: "", target: "_self", title: "" }, { text: "About", href: "", icon: "fas fa-chart-bar", target: "_self", title: "" }] }]; document.body.appendChild(getMenu(data));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.