[英]Javascript - Create parent-child navigation from json
我正在嘗試使用父子關系從 json 創建導航。 我的 json 看起來像這樣。
不知何故,我在打印導航時收到了超出最大調用堆棧的錯誤消息
[
{
"__type": "Service+Menu",
"ID": 1,
"Caption": "Master",
"URL": "",
"Description": "Main menu",
"ParentID": ""
},
{
"__type": "Service+Menu",
"ID": 2,
"Caption": "Branch Details",
"URL": "~/UI/Masters/Branch_Details.aspx",
"Description": "Branch Details",
"ParentID": "1"
},
{
"__type": "Service+Menu",
"ID": 123,
"Caption": "Bank Details",
"URL": "",
"Description": "Bank Details",
"ParentID": "1"
},
{
"__type": "Service+Menu",
"ID": 124,
"Caption": "Bank Details Entry",
"URL": "~/UI/Loans/BankEntryRectification.aspx",
"Description": "Bank Details Entry",
"ParentID": "123"
},
{
"__type": "Service+Menu",
"ID": 10,
"Caption": "Loans&Printing",
"URL": "",
"Description": "",
"ParentID": ""
},
{
"__type": "Service+Menu",
"ID": 11,
"Caption": "Loan Form Request",
"URL": "~/UI/Masters/LoanFormRequest.aspx?Type=General",
"Description": "Loan Form Request",
"ParentID": "10"
}
]
我寫了一個遞歸的 function 來循環它,但不知何故我得到了最大調用堆棧超出錯誤。 我正在使用的代碼是:
console.log(buildNavigation(data));
function buildNavigation(items, parent = '') {
var next = function (items, parent) {
return items.filter(function (item) {
return (item.ParentID == parent);
})
}
var output = '<ul>';
for (var key in next(items, parent)) {
output += '<li>';
output += '<a href="#">' + items[key].Caption + '</a>';
if (next(items, items[key].ID)) {
output += buildNavigation(next(items, items[key].ID), parent);
}
output += '</li>';
}
output += '</ul>';
return output;
}
知道我在哪里犯了錯誤嗎?
根據您的代碼,我編寫了一個工作版本。 請運行代碼片段,然后單擊“構建導航”按鈕,看看這是否是您想要的。
var data = [ { "__type": "Service+Menu", "ID": 1, "Caption": "Master", "URL": "", "Description": "Main menu", "ParentID": "" }, { "__type": "Service+Menu", "ID": 2, "Caption": "Branch Details", "URL": "~/UI/Masters/Branch_Details.aspx", "Description": "Branch Details", "ParentID": "1" }, { "__type": "Service+Menu", "ID": 123, "Caption": "Bank Details", "URL": "", "Description": "Bank Details", "ParentID": "1" }, { "__type": "Service+Menu", "ID": 124, "Caption": "Bank Details Entry", "URL": "~/UI/Loans/BankEntryRectification.aspx", "Description": "Bank Details Entry", "ParentID": "123" }, { "__type": "Service+Menu", "ID": 10, "Caption": "Loans&Printing", "URL": "", "Description": "", "ParentID": "" }, { "__type": "Service+Menu", "ID": 11, "Caption": "Loan Form Request", "URL": "~/UI/Masters/LoanFormRequest.aspx?Type=General", "Description": "Loan Form Request", "ParentID": "10" } ] function buildNavigation(items, parent = '') { var next = function (items, parent) { return items.filter(function (item) { return (item.ParentID == parent); }) } var output = '<ul>'; var subItems = next(items, parent) for (var key in subItems) { output += '<li>'; output += '<a href="#">' + subItems[key].Caption + '</a>'; var subItems2 = next(items, subItems[key].ID) if (subItems2) { output += buildNavigation(items, subItems[key].ID); } output += '</li>'; } output += '</ul>'; return output; } document.querySelector('#build').onclick = function() { document.querySelector('#result').innerHTML = buildNavigation(data) }
<button id="build">Build Navigation</button> <div id="result"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.