Dynamic Menu From JSON Array

Question

I'm new to angularjs, i want to display dynamic menu from json array.

{
"Pages": [{
	"PageId": 1,
	"PageTitle": "Home",
	"PageContent": "Home Page Content",
	"MenuType": "MainMenu",
	"ParentMenu": null,
	"PageStatus": "Active",
	"PageType": true
}, {
	"PageId": 2,
	"PageTitle": "About",
	"PageContent": "about content",
	"MenuType": "SubMenu",
	"ParentMenu": Home,
	"PageStatus": "Active",
	"PageType": true
}, {
	"PageId": 3,
	"PageTitle": "Contact",
	"PageContent": "Contact Us Content",
	"MenuType": "MainMenu",
	"ParentMenu": null,
	"PageStatus": "Active",
	"PageType": true
}]
}

I want menu to be like this:

- Home
  - About
- Contact

Please help me with answer.. Thanks in advance

what is the code around the json array? html and js? is it possible that the example snippet runs at the snippet editor? — tire0011
– tire0011, Commented Mar 21, 2017 at 8:52
What have you tried so far? How does your template look? The controller? The info you provided isn't enough — casraf
– casraf, Commented Mar 21, 2017 at 8:56
You need to change the JSON array format. Sub-menu array should be inside Main-menu array. for example. 'About' should be inside 'Home' object — Naghaveer R
– Naghaveer R, Commented Mar 21, 2017 at 8:56

synthet1c · Accepted Answer · 2017-03-21 12:52:32Z

1

Here is a function that will iterate over your menu and convert it to nested html lists that you can attach to an element in your webpage.

const menu = {
  "Pages": [
    { "PageId": 1, "PageTitle": "Home",       "ParentMenu": null },
    { "PageId": 2, "PageTitle": "About",      "ParentMenu": "Home" },
    { "PageId": 3, "PageTitle": "Contact",    "ParentMenu": null },
    { "PageId": 4, "PageTitle": "Our Story",  "ParentMenu": "About" },
    { "PageId": 5, "PageTitle": "Our Future", "ParentMenu": "About" },
  ]
}

// abstracted way to create an element
const createElement = (type, className, text) => {
  const el = document.createElement(type)
  el.className = className
  if (text) {
    el.appendChild(document.createTextNode(text))
  }
  return el
}

// print the menu as a tree
const createMenu = (menu, parentName = null, level = 0) =>
  menu.reduce((ul, item) => {
    if (item.ParentMenu === parentName) {
      const li = createElement(`li`, `menu__item`, item.PageTitle)
      ul.appendChild(li)
      // recursively call itself changing the parentName to the current PageTitle
      const children = createMenu(menu, item.PageTitle, level+1)
      if (children.childNodes.length) {
        li.appendChild(children)
      }
    }
    return ul
  }, createElement(`ul`, `menu__list level--${level}`))

const app = document.querySelector(`#app`)
app.appendChild(
  createMenu(menu.Pages, null)
)
console.log(app.innerHTML)

<div id="app"></div>

answered Mar 21, 2017 at 12:52

synthet1c

6,3024 gold badges28 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ratna Raju Over a year ago

thanks for the answer @synthet1c.. i want that menus to be like this w3schools.com/bootstrap/… could you please help me out?

Collectives™ on Stack Overflow

Dynamic Menu From JSON Array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related