从 JSON 渲染多级 HTML 菜单答案

【问题标题】：Render multi-level HTML menu from JSON从 JSON 渲染多级 HTML 菜单
【发布时间】：2019-04-06 14:54:40
【问题描述】：

我想从 JSON 呈现菜单和子类别。

现在我可以显示菜单，但我不明白如何进一步显示子类别。

子菜单的最后应该在菜单的旁边，但这不是必须的，主要是了解如何最灵活地显示这个的原理。

当前代码的问题是JSON中有2个孩子，但是当我显示它们时，它们都被添加到一个链接中。我希望如果对象有孩子，每个孩子都会收到自己的链接并显示出来。

axios.get('http://localhost:3000/data.json')
.then(function (response) {
    const posts = response.data;

    console.log(posts.length);

    posts.forEach((elem) => {

        let nav = document.querySelector('.nav-inner'),
            link = document.createElement('a');

        link.className = 'nav-inner__link';
        link.setAttribute('href', '/' + elem.url);

        link.append(elem.title);

        nav.appendChild(link);


        if (elem.childred !== 0) {

            let i = elem.childrens,
                menu = document.querySelector('.menu'),
                menuLink = document.createElement('a');
                menuLink.className = 'menu__link';

            i.forEach((elem) => {
                console.log('sub-menu-link -' + elem.title);

                menuLink.setAttribute('href', '/' + elem.url);
                menuLink.append(elem.name);
                menu.appendChild(menuLink);
            });
        }

    });
});

示例 JSON

{
"id": 22,
"name": "\u041f\u043e\u043b\u0438\u0442\u0438\u043a\u0430 \u0438 \u043a\u043e\u0440\u0440\u0443\u043f\u0446\u0438\u044f",
"title": "\u041f\u043e\u043b\u0438\u0442\u0438\u043a\u0430 \u0438 \u043a\u043e\u0440\u0440\u0443\u043f\u0446\u0438\u044f",
"url": "politican",
"order_list": 0,
"meta_title": "\u041a\u043e\u0440\u0440\u0443\u043f\u0446\u0438\u044f",
"meta_desc": null,
"childrens": [
  {
    "id": 28,
    "name": "\u041a\u0430\u0447\u0435\u0441\u0442\u0432\u043e",
    "title": "\u041a\u0430\u0447\u0435\u0441\u0442\u0432\u043e",
    "url": "medic",
    "order_list": 7,
    "meta_title": null,
    "meta_desc": null,
    "childrens": []
  },
  {
    "id": 29,
    "name": "\u0414\u043e\u043b\u0435\u0432\u043e\u0435 \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u043e",
    "title": "\u0414\u043e\u043b\u0435\u0432\u043e\u0435 \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u043e",
    "url": "building",
    "order_list": 8,
    "meta_title": null,
    "meta_desc": null,
    "childrens": []
  }
]
},

【问题讨论】：

您似乎已经有了一些附加子类别的代码。您遇到问题了吗？请解释您在代码中面临的实际问题。到目前为止，您的帖子有点太模糊了。谢谢。
@ADyson 在 json 中有 2 个子项，但是当我显示它们时，它们都被添加到一个链接中我希望如果对象有子项，则每个都收到自己的链接并显示
未经测试但很确定是这种情况：1）将menuLink = document.createElement('a'); menuLink.className = 'menu__link';更改为var menuLink = document.createElement('a'); menuLink.className = 'menu__link';（在开头添加了var）2.然后将这两行移到它后面的foreach循环中。这样您就可以为每个子项创建一个新的 menuLink。现在你只创建一个链接，不管有多少孩子。我认为这只是一个简单的逻辑错误。
@ADyson tnx ，你能就如何让这段代码更通用一些建议吗？第一次做这个任务
嗯，这有点难以回答。以什么方式通用？你设想的场景是什么？你想支持什么功能？没有灵丹妙药“通用”的答案，总是有限制等。

标签： javascript html json loops dom

【解决方案1】：

现在你只创建一个链接，不管有多少孩子。这只是一个简单的逻辑错误。修复它：

将 menuLink = document.createElement('a'); menuLink.className = 'menu__link'; 更改为 var menuLink = document.createElement('a'); menuLink.className = 'menu__link';（在开头添加 var）
然后将这两行移到其后面的 foreach 循环内。

这样您就可以为每个子项创建一个新的 menuLink。

片段：

        let i = elem.childrens,
        menu = document.querySelector('.menu'),

        i.forEach((elem) => {
            console.log('sub-menu-link -' + elem.title);

            var menuLink = document.createElement('a');
            menuLink.className = 'menu__link';
            menuLink.setAttribute('href', '/' + elem.url);
            menuLink.append(elem.name);
            menu.appendChild(menuLink);
        });

【讨论】：