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"
  }
]

我编写了一个递归函数来循环它，但不知何故我收到了最大调用堆栈超出错误。我正在使用的代码是:

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>