从JSON数组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>

演示


子菜单1
子菜单1


子菜单2


子菜单2 1


子菜单2 1


子菜单2 1 2




子菜单2






凤凰

新页
不是大菜单

请注意：

例如：“页面id”：“102608802958096849”，“标题”：“子菜单1”，“页面顺序”：1，“父页面id”：“305280635460611248”，“布局”：“标题”，“页面url”：“子菜单1-1.html”

页面id=102608802958096849（定义菜单id）

标题=子菜单1（标题）

页码顺序=1（菜单：第n个子菜单（1））

---

有没有想法从JSON数组构建上面的菜单？提前感谢

首先，您应该嵌套子对象。这会让你的生活更轻松（而且这也是正确的方式）

---

然后，您可以循环浏览子菜单项及其子链接。您可以先构建一棵树，然后呈现所需的结构

函数getTree（数组）{
var o={}；
array.forEach（a=>{
if（o[a.page\u id]&&o[a.page\u id].子项）{
a、 children=o[a.page\u id]&&o[a.page\u id]。children；
}
o[a.page_id]=a；
o[a.parent_id]=o[a.parent_id]|{}；
o[a.parent_id]。children=o[a.parent_id]。children | |[]；
o[a.parent\u id]。children.push（a）；
});
返回o.null.children；
}
功能构建菜单（阵列、目标）{
var ul=document.createElement（'ul'）；
array.forEach（o=>{
var li=document.createElement（'li'），
a=document.createElement（'a'），
分区；
a、 appendChild（document.createTextNode（o.title））；
a、 href=o.page\u url；
李.儿童（a）；
如果（o.儿童）{
div=document.createElement（'div'）；
构建菜单（o.children，div）；
李.儿童组(分区);；
}
ul.儿童（li）；
});
目标儿童（ul）；
}
var数据=[{page\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\，标题：“子菜单1”，页面顺序：1，家长id:“308333626876055885”，版面：“页眉”，页面url:“Submenu-1.html”}，{页面id:“308333626876055885”，标题：“演示”，页面顺序：1，家长id:null，版面：“页眉滑块”，页面url:“index.html”}，{页面id:“357018431614169959”，标题：“非大菜单”，页面顺序：1，家长id:“756836287653398147”，版面：“页眉”，页面url:“not mega menu.html”}，页面id:“363544895956322795”，标题：“子菜单21”，页面顺序：1，家长id:“207782958260361106”，版面：“页眉”，页面url:“子菜单2-1-1.html”}，页面id:“130518632716609153”，标题：“新页面”，页面顺序：2，家长id:“7568367653398147”，版面：“页眉”，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:“5207788073299851538”，title:“Submenu-2”，page_-order:2，parent_-id:“196241715470310788”，layout:“header”，page_-url:“Submenu-2.html”}，{“756836287653398147”，标题：“Phoenix”，页码顺序：2，父项id:null，布局：“header”，页码url:“Phoenix.html”}，{页码id:“9512879608223231869”，标题：“子菜单2 1 2”，页码顺序：2，父项id:“20778958260361106”，布局：“header”，页码url:“子菜单2-1-2.html”}，
tree=getTree（数据）；
构建菜单（树、文档、正文）；
console.log（tree）；

首先，我们必须将节点与其父节点关联起来，建立一个树：

 const hash = {}, root = [];
 // Go over the array and destructure it:
 for(const {page_url, title, page_id, parent_id} of array) {
    // Add this node to the hashtable:
    let el;
    if(hash[page_id]) {
      el = Object.assign(hash[page_id], {page_url, title});
    } else {
      el = hash[page_id] = {page_url, title, children: []};
    }

    // Link parents / children
    if(parent_id) {
      if(hash[parent_id]) {
         hash[parent_id].children.push(el);
      } else {
         hash[parent_id] = { children: [ el ] };
      }
   } else {
      root.push(el);
   }
}

现在

root

包含一个根元素列表，每个根元素都有一个

children

数组，该数组包含带有children的元素等等。现在递归构建DOM树非常简单：

 function buildRecursively(array) {
   const container = document.createElement("li");
   for(const el of array) {
      const link = document.createElement("a");
      link.textContent = el.title;
      link.href = el.page_url;
      container.appendChild(link);
      container.appendChild(buildRecursively(el.children));
   }
  return container;
}

所以你可以做：

 document.body.appendChild(buildRecursively(root));

---

把数组变成一棵树，而不是简单的把它变成一棵DOM树。我是一个新手，我不知道怎么做。你能帮我弄清楚吗？谢谢。谢谢。我看了你以前的问题，它们都比这个好得多。照你刚才说的做就行了（展示你的尝试，解释你被卡住了吗等等），我很乐意帮助你：）以下是我尝试过的东西：pages_json=（上面的json数组）var pages_json_string=json.parse（pages_json）；var pages_json_length=pages_json_string.length；var submenu=“

”+title+“

”，例如（i=0；这意味着我需要对父对象的每个子对象进行分类，然后将其拆分为不同的数组？如果同一菜单父对象中有10个级别会怎么样？我正在基于此json文件制作一个大菜单。而且确实不可能确切知道每个json文件中有多少子菜单级别不幸的是，您需要执行loops在循环中。在

 document.body.appendChild(buildRecursively(root));