时间戳

首页 > 解决方案 > 从 JSON Array Javascript 创建菜单

javascript - 从 JSON Array Javascript 创建菜单

问题描述

我想从 JSON 数组创建一个菜单

JSON 数组：

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

我要创建的预期菜单如下所示：

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>

注意：

举个例子："page_id":"102608802958096849","title":"Submenu 1 1","page_order":1,"parent_id":"305280635460611248","layout":"header","page_url":"submenu -1-1.html"

page_id = 102608802958096849（定义菜单ID）

标题 = 子菜单 1 1（标题）

page_order = 1 (menu:nth-child(1))

从 JSON 数组构建上面的菜单有什么想法吗？提前致谢

标签： javascripthtmlcssarraysjson

解决方案

首先，您应该嵌套子对象。这将使您的生活更轻松（这也是正确的方法）。

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

然后你可以遍历子菜单项和它的子链接

推荐阅读