Question

我想从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": []
  }
]
},

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

从JSON渲染多级HTML菜单

1 个答案: