Задать вопрос
Zickname
@Zickname
Амеба
javascript

Как преобразовать список ul в json?

Помогите с решение задачи. Нужно Преобразовать списки UL, LI в JSON со вложенностью
Нужно пробежаться по всему дереву и взять только .Text из тега a, Вложенность тут разная.
HTML
<li class="b-tree__parent-li">
        <span class="js-tree-link" data-id="123">
                    <i class="icon icon-plus-square"></i>
                </span>

        <a href="https://www.rlsnet.ru/pharm-groups/protivoopuxolevye-sredstva-73">Противоопухолевые средства</a>
        <ul>

            <li class="b-tree__parent-li">

                <a href="https://www.rlsnet.ru/pharm-groups/alkiliruyushhie-sredstva-72">Алкилирующие средства</a>
                <ul>
                </ul>
            </li>


            <li class="b-tree__parent-li">

                <a href="https://www.rlsnet.ru/pharm-groups/antimetabolity-101">Антиметаболиты</a>
                <ul>
                </ul>
            </li>


            <li class="b-tree__parent-li">

                <a href="https://www.rlsnet.ru/pharm-groups/drugie-protivoopuxolevye-sredstva-195">Другие противоопухолевые средства</a>
                <ul>
                </ul>
            </li>


            <li class="b-tree__parent-li">

                <a href="https://www.rlsnet.ru/pharm-groups/protivoopuxolevye-antibiotiki-78">Противоопухолевые антибиотики</a>
                <ul>
                </ul>
            </li>


            <li class="b-tree__parent-li">

                <a href="https://www.rlsnet.ru/pharm-groups/protivoopuxolevye-gormonalnye-sredstva-i-antagonisty-gormonov-132">Противоопухолевые гормональные средства и антагонисты гормонов</a>
                <ul>
                </ul>
            </li>


            <li class="b-tree__parent-li">

                <a href="https://www.rlsnet.ru/pharm-groups/protivoopuxolevye-sredstva-ingibitory-proteinkinaz-335">Противоопухолевые средства — ингибиторы протеинкиназ</a>
                <ul>
                </ul>
            </li>


            <li class="b-tree__parent-li">
                <span class="js-tree-link" data-id="123">
                    <i class="icon icon-plus-square"></i>
                     </span>

                <a href="https://www.rlsnet.ru/pharm-groups/protivoopuxolevye-sredstva-monoklonalnye-antitela-328">Противоопухолевые средства — моноклональные антитела</a>
                <ul>

                    <li class="b-tree__parent-li">

                        <a href="https://www.rlsnet.ru/pharm-groups/protivoopuxolevye-sredstva-monoklonalnye-antitela-v-kombinaciyax-351">Противоопухолевые средства — моноклональные антитела в комбинациях</a>

                        <ul>
                        </ul>
                    </li>
                </ul>
            </li>


            <li class="b-tree__parent-li">
                <span class="js-tree-link" data-id="123">
                    <i class="icon icon-plus-square"></i>
                     </span>

                <a href="https://www.rlsnet.ru/pharm-groups/protivoopuxolevye-sredstva-rastitelnogo-proisxozdeniya-170">Противоопухолевые средства растительного происхождения</a>
                <ul>

                    <li class="b-tree__parent-li">

                        <a href="https://www.rlsnet.ru/pharm-groups/protivoopuxolevye-sredstva-rastitelnogo-proisxozdeniya-v-kombinaciyax-376">Противоопухолевые средства растительного происхождения в комбинациях</a>

                        <ul>
                        </ul>
                    </li>
                </ul>
            </li>

        </ul>
    </li>
<li class="b-tree__parent-li">
        <span class="js-tree-link" data-id="123">
                    <i class="icon icon-plus-square"></i>
                </span>

        <a href="https://www.rlsnet.ru/pharm-groups/raznye-sredstva-134">Разные средства</a>
        <ul>

            <li class="b-tree__parent-li">

                <a href="https://www.rlsnet.ru/pharm-groups/vspomogatelnye-veshhestva-reaktivy-i-poluprodukty-133">Вспомогательные вещества, реактивы и полупродукты</a>
                <ul>
                </ul>
            </li>


            <li class="b-tree__parent-li">

                <a href="https://www.rlsnet.ru/pharm-groups/detskoe-pitanie-vklyucaya-smesi-203">Детское питание (включая смеси)</a>
                <ul>
                </ul>
            </li>


            <li class="b-tree__parent-li">

                <a href="https://www.rlsnet.ru/pharm-groups/drugie-raznye-sredstva-218">Другие разные средства</a>
                <ul>
                </ul>
            </li>


            <li class="b-tree__parent-li">

                <a href="https://www.rlsnet.ru/pharm-groups/radioprofilakticeskie-i-radioterapevticeskie-sredstva-291">Радиопрофилактические и радиотерапевтические средства</a>
                <ul>
                </ul>
            </li>


            <li class="b-tree__parent-li">

                <a href="https://www.rlsnet.ru/pharm-groups/skleroziruyushhie-sredstva-287">Склерозирующие средства</a>
                <ul>
                </ul>
            </li>


            <li class="b-tree__parent-li">
                <span class="js-tree-link" data-id="123">
                    <i class="icon icon-plus-square"></i>
                     </span>

                <a href="https://www.rlsnet.ru/pharm-groups/sredstva-dlya-korrekcii-narusenii-pri-alkogolizme-toksiko-i-narkomanii-206">Средства для коррекции нарушений при алкоголизме, токсико- и наркомании</a>
                <ul>

                    <li class="b-tree__parent-li">

                        <a href="https://www.rlsnet.ru/pharm-groups/sredstva-dlya-korrekcii-narusenii-pri-alkogolizme-toksiko-i-narkomanii-v-kombinaciyax-305">Средства для коррекции нарушений при алкоголизме, токсико- и наркомании в комбинациях</a>

                        <ul>
                        </ul>
                    </li>
                </ul>
            </li>

        </ul>
    </li>
<li class="b-tree__parent-li">
        <span class="js-tree-link" data-id="123">
                    <i class="icon icon-plus-square"></i>
                </span>

        <a href="https://www.rlsnet.ru/pharm-groups/regeneranty-i-reparanty-98">Регенеранты и репаранты</a>
        <ul>

            <li class="b-tree__parent-li">

                <a href="https://www.rlsnet.ru/pharm-groups/regeneranty-i-reparanty-v-kombinaciyax-176">Регенеранты и репаранты в комбинациях</a>
                <ul>
                </ul>
            </li>

        </ul>
    </li></body></html>


нужно получить JSON
На выходе нужно получить JSON вида
[{"name": <a>.Text, "child": [...]}, ...]

Попытка
Сделал такой код в консоли, он хорошо выводит все данные, но я затрудняюсь создать JSON
aa = document.getElementsByClassName('b-tree__collapse')[0].children[0].children
let arr = []
let obj = {'name':'', 'child':[]}
function abc(aa){
for (idx of aa){
    if (idx.nodeName == 'LI' && idx.childElementCount > 0){
        console.log(idx.querySelector('a').text)
        if (!(idx.querySelector('ul')==null) && idx.querySelector('ul').childElementCount > 0){
        abc(idx.querySelector('ul').children)}
        }}
}
abc (aa)
  • Вопрос задан
  • 268 просмотров
Комментировать
Подписаться 2 Средний Комментировать
Решения вопроса 1
Seasle
@Seasle Куратор тега JavaScript 
const collectTree = (itemSelector, elementSelector, root = document) =>
  [...root.querySelectorAll(itemSelector)].map((element) => ({
    name: element.querySelector(elementSelector)?.textContent.trim(),
    child: collectTree(itemSelector, elementSelector, element),
  }));

collectTree('ul > li', 'a');
// или
collectTree(':scope > ul > li', 'a');

Результат

[
    {
        "name": "Вегетотропные средства",
        "child": [
            {
                "name": "Адренолитические средства",
                "child": [
                    {
                        "name": "Альфа- и бета-адреноблокаторы",
                        "child": []
                    },
                    {
                        "name": "Альфа-адреноблокаторы",
                        "child": [
                            {
                                "name": "Альфа-адреноблокаторы в комбинациях",
                                "child": []
                            }
                        ]
                    },
                    {
                        "name": "Бета-адреноблокаторы",
                        "child": [
                            {
                                "name": "Бета-адреноблокаторы в комбинациях",
                                "child": []
                            }
                        ]
                    },
                    {
                        "name": "Симпатолитики",
                        "child": [
                            {
                                "name": "Симпатолитики в комбинациях",
                                "child": []
                            }
                        ]
                    }
                ]
            },
            {
                "name": "Противоопухолевые средства",
                "child": [
                    {
                        "name": "Алкилирующие средства",
                        "child": []
                    },
                    {
                        "name": "Антиметаболиты",
                        "child": []
                    },
                    {
                        "name": "Другие противоопухолевые средства",
                        "child": []
                    },
                    {
                        "name": "Противоопухолевые антибиотики",
                        "child": []
                    },
                    {
                        "name": "Противоопухолевые гормональные средства и антагонисты гормонов",
                        "child": []
                    },
                    {
                        "name": "Противоопухолевые средства — ингибиторы протеинкиназ",
                        "child": []
                    },
                    {
                        "name": "Противоопухолевые средства — моноклональные антитела",
                        "child": [
                            {
                                "name": "Противоопухолевые средства — моноклональные антитела в\n                                        комбинациях",
                                "child": []
                            }
                        ]
                    },
                    {
                        "name": "Противоопухолевые средства растительного происхождения",
                        "child": [
                            {
                                "name": "Противоопухолевые средства растительного происхождения в\n                                        комбинациях",
                                "child": []
                            }
                        ]
                    }
                ]
            },
            {
                "name": "Разные средства",
                "child": [
                    {
                        "name": "Вспомогательные вещества, реактивы и полупродукты",
                        "child": []
                    },
                    {
                        "name": "Детское питание (включая смеси)",
                        "child": []
                    },
                    {
                        "name": "Другие разные средства",
                        "child": []
                    },
                    {
                        "name": "Радиопрофилактические и радиотерапевтические средства",
                        "child": []
                    },
                    {
                        "name": "Склерозирующие средства",
                        "child": []
                    },
                    {
                        "name": "Средства для коррекции нарушений при алкоголизме, токсико- и\n                                наркомании",
                        "child": [
                            {
                                "name": "Средства для коррекции нарушений при алкоголизме, токсико-\n                                        и наркомании в комбинациях",
                                "child": []
                            }
                        ]
                    }
                ]
            },
            {
                "name": "Регенеранты и репаранты",
                "child": [
                    {
                        "name": "Регенеранты и репаранты в комбинациях",
                        "child": []
                    }
                ]
            }
        ]
    }
]

Ответ написан
4 комментария
4 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Fullstack JavaScript разработчик
MakeDifference
от 30 000 до 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать/переобучить модель машинного обучения
14 нояб. 2024, в 09:41
300000 руб./за проект
Интеграция готовой верстки Опенкарт
14 нояб. 2024, в 09:22
30000 руб./за проект
Настройка таргетированной и контекстной рекламы
14 нояб. 2024, в 09:16
50000 руб./за проект
Ещё заказы