Javascript - 从 json 创建父子导航

Question

我正在尝试使用父子关系从 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;
}

知道我在哪里犯了错误吗？

Answer 1

根据您的代码，我编写了一个工作版本。 请运行代码片段，然后单击“构建导航”按钮，看看这是否是您想要的。

 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>