时间戳

首页 > 解决方案 > 从 JSON 渲染多级 HTML 菜单

javascript - 从 JSON 渲染多级 HTML 菜单

问题描述

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

标签： javascripthtmljsonloopsdom

解决方案

现在你只创建一个链接，不管有多少孩子。这只是一个简单的逻辑错误。要解决这个问题：

  1. 更改menuLink = document.createElement('a'); menuLink.className = 'menu__link';为var menuLink = document.createElement('a'); menuLink.className = 'menu__link';（将 var 添加到开头）

  2. 然后将这两行移到它后面的 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);
        });

推荐阅读