Javascript - Create parent-child navigation from json

Question

I'm trying to create navigation from json using parent child relation. My json looks like this.

Somehow I'm getting maximum callstack exceeded error message while printing the navigation

 [
  {
    "__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"
  }
]

I wrote a recursive function to loop through it, but somehow I'm getting maximum call stack exceeded error. The code I'm using is:

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;
}

Any Idea where I'm making the mistake?

Answer 1

Based on your code, I wrote a working version. Please run the code snippet, and click the "Build Navigation" button to see if this is want you want.

 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>