Рендеринг многоуровневого HTML-меню из JSON

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

Прямо сейчас вы создаете только одну ссылку, независимо от количества детей. Это просто логическая ошибка. Чтобы это исправить:

1. изменить menuLink = document.createElement('a'); menuLink.className = 'menu__link'; на var menuLink = document.createElement('a'); menuLink.className = 'menu__link'; (добавлен var в начало)

2. Затем переместите эти две строки внутри цикла foreach, который следует за ним.

Таким образом, вы создаете новую ссылку меню для каждого дочернего элемента.

Отрывок:

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