Design a customized menu using a JavaScript JSON array

Question

Design a customized menu using a JavaScript JSON array

Looking to generate a menu using JSON Array data

Here is the JSON Array:

[{
    "page_id":"102608802958096849","title":"Submenu 1 1","page_order":1,"parent_id":"305280635460611248","layout":"header","page_url":"submenu-1-1.html"
},{
    "page_id":"207782958260361106","title":"Submenu 2 1","page_order":1,"parent_id":"196241715470310788","layout":"header","page_url":"submenu-2-1.html"
},{
    "page_id":"305280635460611248","title":"Submenu 1","page_order":1,"parent_id":"308333626876055885","layout":"header","page_url":"submenu-1.html"
},{
    "page_id":"308333626876055885","title":"Demo","page_order":1,"parent_id":null,"layout":"header-slider","page_url":"index.html"
},{
    "page_id":"357018431614169959","title":"Not Mega Menu","page_order":1,"parent_id":"756836287653398147","layout":"header","page_url":"not-mega-menu.html"
},{
    "page_id":"363544895956322795","title":"Submenu 2 1 1","page_order":1,"parent_id":"207782958260361106","layout":"header","page_url":"submenu-2-1-1.html"
},{
    "page_id":"130518632716609153","title":"New Page","page_order":2,"parent_id":"756836287653398147","layout":"header","page_url":"new-page.html"
},{
    "page_id":"196241715470310788","title":"Submenu 2","page_order":2,"parent_id":"308333626876055885","layout":"header","page_url":"submenu-2.html"
},{
    "page_id":"520778073299851538","title":"Submenu 2 2","page_order":2,"parent_id":"196241715470310788","layout":"header","page_url":"submenu-2-2.html"
},{
    "page_id":"756836287653398147","title":"Phoenix","page_order":2,"parent_id":null,"layout":"header","page_url":"phoenix.html"
},{
    "page_id":"951287960823231869","title":"Submenu 2 1 2","page_order":2,"parent_id":"207782958260361106","layout":"header","page_url":"submenu-2-1-2.html"
}]

The desired menu structure should resemble the following:

HTML:

<ul>
<li>
    <a>Demo</a>
    <div>
        <ul>
            <li>
                <a>Submenu 1</a>
                <div>
                    <ul><li><a>Submenu 1 1</a></li></ul>
                </div>
            </li>
            <li>
                <a>Submenu 2</a>
                <div>
                    <ul>
                        <li>
                            <a>Submenu 2 1</a>
                            <div>
                                <ul>
                                    <li>
                                        <a>Submenu 2 1 1</a>
                                    </li>
                                    <li>
                                        <a>Submenu 2 1 2</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a>Submenu 2 2</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</li>
<li>
    <a>Phoenix</a>
    <div>
        <ul>
            <li><a>New Page</a></li>
            <li><a>Not Mega Menu</a></li>
        </ul>
    </div>
</li>

Please note:

For example: "page_id":"102608802958096849","title":"Submenu 1 1","page_order":1,"parent_id":"305280635460611248","layout":"header","page_url":"submenu-1-1.html"

page_id = 102608802958096849 (defines the menu id)

title = Submenu 1 1 (the title of the menu item)

page_order = 1 (represents the position of the menu item)

Any suggestions on how to construct the above menu from the JSON array provided? Thank you in advance

javascript html css arrays json

Answer 1

Answer №1

To create the desired structure, you can start by constructing a tree.

function generateTree(arr) {
    var obj = {};
    arr.forEach(item => {
        if (obj[item.page_id] && obj[item.page_id].children) {
            item.children = obj[item.page_id] && obj[item.page_id].children;
        }
        obj[item.page_id] = item;
        obj[item.parent_id] = obj[item.parent_id] || {};
        obj[item.parent_id].children = obj[item.parent_id].children || [];
        obj[item.parent_id].children.push(item);
    });
    return obj.null.children;
}

function buildMenu(arr, target) {
    var ul = document.createElement('ul');

    arr.forEach(obj => {
        var li = document.createElement('li'),
            a = document.createElement('a'),
            div;

        a.appendChild(document.createTextNode(obj.title));
        a.href = obj.page_url;
        li.appendChild(a);
        if (obj.children) {
            div = document.createElement('div');
            buildMenu(obj.children, div);
            li.appendChild(div);
        }
        ul.appendChild(li);
    });
    target.appendChild(ul);
}

var data = [{ page_id: "102608802958096849", title: "Submenu 1 1", page_order: 1, parent_id: "305280635460611248", layout: "header", page_url: "submenu-1-1.html" }, { page_id: "207782958260361106", title: "Submenu 2 1", page_order: 1, parent_id: "196241715470310788", layout: "header", page_url: "submenu-2-1.html" }, { page_id: "305280635460611248", title: "Submenu 1", page_order: 1, parent_id: "30833362687...

buildMenu(data, document.body);

console.log(tree);

Answer 2

To create the desired structure, you can start by constructing a tree.

function generateTree(arr) {
    var obj = {};
    arr.forEach(item => {
        if (obj[item.page_id] && obj[item.page_id].children) {
            item.children = obj[item.page_id] && obj[item.page_id].children;
        }
        obj[item.page_id] = item;
        obj[item.parent_id] = obj[item.parent_id] || {};
        obj[item.parent_id].children = obj[item.parent_id].children || [];
        obj[item.parent_id].children.push(item);
    });
    return obj.null.children;
}

function buildMenu(arr, target) {
    var ul = document.createElement('ul');

    arr.forEach(obj => {
        var li = document.createElement('li'),
            a = document.createElement('a'),
            div;

        a.appendChild(document.createTextNode(obj.title));
        a.href = obj.page_url;
        li.appendChild(a);
        if (obj.children) {
            div = document.createElement('div');
            buildMenu(obj.children, div);
            li.appendChild(div);
        }
        ul.appendChild(li);
    });
    target.appendChild(ul);
}

var data = [{ page_id: "102608802958096849", title: "Submenu 1 1", page_order: 1, parent_id: "305280635460611248", layout: "header", page_url: "submenu-1-1.html" }, { page_id: "207782958260361106", title: "Submenu 2 1", page_order: 1, parent_id: "196241715470310788", layout: "header", page_url: "submenu-2-1.html" }, { page_id: "305280635460611248", title: "Submenu 1", page_order: 1, parent_id: "30833362687...

buildMenu(data, document.body);

console.log(tree);

Answer 3

Answer №2

To start with, the best practice is to organize child objects within a parent object. This not only streamlines your process but also aligns with standard coding conventions.

[
  "Menu Item 1": {
    "page_url": "one.html",
    "submenus": [
      {
        "item": "Submenu 1-1",
        "page_url": "one-one.html",
      },
      {
        "item": "Submenu 1-2",
        "page_url": "one-two.html",
      }
    ],
  },
  "Menu Item 2": {
    "page_url": "two.html",
    "submenus": [
      {
        "item": "Submenu 2-1",
        "page_url": "two-one.html",
      },
      {
        "item": "Submenu 2-2",
        "page_url": "two-two.html",
      }
    ],
  }
]

From there, you can easily iterate through the submenu items and their corresponding links.

Answer 4

To start with, the best practice is to organize child objects within a parent object. This not only streamlines your process but also aligns with standard coding conventions.

[
  "Menu Item 1": {
    "page_url": "one.html",
    "submenus": [
      {
        "item": "Submenu 1-1",
        "page_url": "one-one.html",
      },
      {
        "item": "Submenu 1-2",
        "page_url": "one-two.html",
      }
    ],
  },
  "Menu Item 2": {
    "page_url": "two.html",
    "submenus": [
      {
        "item": "Submenu 2-1",
        "page_url": "two-one.html",
      },
      {
        "item": "Submenu 2-2",
        "page_url": "two-two.html",
      }
    ],
  }
]

From there, you can easily iterate through the submenu items and their corresponding links.

Answer 5

Answer №3

Initially, it is crucial to establish the connection between nodes and their respective parents in order to construct a tree structure:

 const map = {}, mainRoot = [];
 // Iterate through the array and destructure its elements:
 for(const {link_url, heading, link_id, parent_id} of array) {
    // Store each node in the map:
    let element;
    if(map[link_id]) {
      element = Object.assign(map[link_id], {link_url, heading});
    } else {
      element = map[link_id] = {link_url, heading, children: []};
    }

    // Establish parent-child relationships
    if(parent_id) {
      if(map[parent_id]) {
         map[parent_id].children.push(element);
      } else {
         map[parent_id] = { children: [ element ] };
      }
   } else {
      mainRoot.push(element);
   }
}

At this point, mainRoot holds a collection of root elements, with each having a children array containing child elements recursively. This enables an effortless creation of a DOM tree using recursion:

 function constructTree(array) {
   const container = document.createElement("li");
   for(const element of array) {
      const hyperlink = document.createElement("a");
      hyperlink.textContent = element.heading;
      hyperlink.href = element.link_url;
      container.appendChild(hyperlink);
      container.appendChild(constructTree(element.children));
   }
  return container;
}

Simply execute the following code snippet:

 document.body.appendChild(constructTree(mainRoot));

Answer 6

Initially, it is crucial to establish the connection between nodes and their respective parents in order to construct a tree structure:

 const map = {}, mainRoot = [];
 // Iterate through the array and destructure its elements:
 for(const {link_url, heading, link_id, parent_id} of array) {
    // Store each node in the map:
    let element;
    if(map[link_id]) {
      element = Object.assign(map[link_id], {link_url, heading});
    } else {
      element = map[link_id] = {link_url, heading, children: []};
    }

    // Establish parent-child relationships
    if(parent_id) {
      if(map[parent_id]) {
         map[parent_id].children.push(element);
      } else {
         map[parent_id] = { children: [ element ] };
      }
   } else {
      mainRoot.push(element);
   }
}

At this point, mainRoot holds a collection of root elements, with each having a children array containing child elements recursively. This enables an effortless creation of a DOM tree using recursion:

 function constructTree(array) {
   const container = document.createElement("li");
   for(const element of array) {
      const hyperlink = document.createElement("a");
      hyperlink.textContent = element.heading;
      hyperlink.href = element.link_url;
      container.appendChild(hyperlink);
      container.appendChild(constructTree(element.children));
   }
  return container;
}

Simply execute the following code snippet:

 document.body.appendChild(constructTree(mainRoot));

Design a customized menu using a JavaScript JSON array

Answer №1

Answer №2

Answer №3

Similar questions

Harness the power of loops to extract data from various URLs in JSON format using Selenium with Python

Guide to accessing the content within an h1 tag with JavaScript

Obtaining the camera's rotation in radians using Three.js

Designing a straightforward thumbs-up icon

When using Mongoose populate, it may either return an empty array or a list of Object

The latest URL is not launching in a separate tab

Using JavaScript to identify the unlock screen on a website

Using setRGB with BufferedImage results in inaccurate setColoring

Unleashing the power of JAX-RS with the magical @XmlIDREF

Encountering a 401 Unauthorized error while attempting an AJAX call to an ASP.NET Web API endpoint that has Windows authentication activated

Tips for including a hyperlink in a collapsible element within a dropdown menu using Bootstrap 5

PHP Multidimensional Array Magic

Eliminating the appearance of horizontal scroll bar by employing transform scale to zoom out

Using JavaScript to dynamically write content to the document in the

Ways to detect if there is a new database record and display it in the notification bar with an alert

What steps can I take to make sure my JavaScript code accurately calculates numbers without resulting in undefined or NaN values?

What are the capabilities of an INNER JOIN query in Objection JS?

Prevent storing each result value in a separate array when utilizing preg_match in PHP

displaying information in table cells with jquery

Interacting with PHP through JavaScript function calls