javascript - 从 JSON 数组 Javascript 创建菜单

Question

我想从 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)

title = 子菜单 1 1(标题)

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

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

Answer 1

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

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);