Question

我想从JSON Array

创建一个菜单

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>

请注意：

举例：＆＃34; page_id＆＃34;：＆＃34; 102608802958096849＆＃34;，＆＃34; title＆＃34;：＆＃34;子菜单1 1＆＃34;，＆＃34; page_order＆＃34;：1，＆＃34; PARENT_ID＆＃34;：＆＃34; 305280635460611248＆＃34;＆＃34;布局＆＃34;：＆＃34;头＆＃34;＆＃34; PAGE_URL＆＃34; ：＆＃34;子菜单-1-1.html＆＃34;

page_id = 102608802958096849（定义菜单ID）

title =子菜单1 1（标题）

page_order = 1（menu：nth-child（1））

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

Answer 1

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

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

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

Answer 2

您可以先构建一个树，然后渲染所需的结构。

function getTree(array) {
    var o = {};
    array.forEach(a => {
        if (o[a.page_id] && o[a.page_id].children) {
            a.children = o[a.page_id] && o[a.page_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_id].children.push(a);
    });
    return o.null.children;
}

function buildMenu(array, target) {
    var ul = document.createElement('ul');

    array.forEach(o => {
        var li = document.createElement('li'),
            a = document.createElement('a'),
            div;

        a.appendChild(document.createTextNode(o.title));
        a.href = o.page_url;
        li.appendChild(a);
        if (o.children) {
            div = document.createElement('div');
            buildMenu(o.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: "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" }],
    tree = getTree(data);

buildMenu(tree, document.body);

console.log(tree);

Answer 3

首先，我们必须将节点与父母联系起来，建立一棵树：

 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数组，其中包含带有子元素的元素，依此类推。现在递归地构建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));

从JSON Array Javascript创建菜单

3 个答案: