Как многоуровневые элементы DOM неизвестного уровня вложенности преобразовать в JSON?

Question

[Лев Салатов]

Доброго времени суток!

В JS не силен и уже 2 дня пытаюсь решить вроде простую задачу, но у меня ничего внятного не получается.

Может я конечно и в целом не правильно делаю.
Задача такая: есть страница, на которой создается меню неограниченного уровня вложенности. Пункты динамически добавляются и сортируются через Sortable jQuery UI.

После этого нужно отправить JSON в PHP для записи в БД. Соответственно, этот JSON потом будет выводиться на страницы через PHP.

Есть такой DOM:

<ul>
    <li><span>Пункт 1</span></li>
    <li>
        <span>Пункт 2</span>
        <ul>
            <li><span>Пункт 2.1</span></li>
            <li>
                <span>Пункт 2.2</span>
                <ul>
                    <li><span>Пункт 2.2.1</span></li>
                    <li><span>Пункт 2.2.2</span></li>
                    <li>
                        <span>Пункт 2.2.3</span>
                        <ul>
                            <li><span>2.2.3.1</span></li>
                            <li><span>2.2.3.2</span></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><span>Пункт 2.3</span></li>
        </ul>
    </li>
    <li><span>Пункт 3</span></li>
    <li>
        <span>Пункт 4</span>
        <ul>
            <li><span>Пункт 4.1</span></li>
            <li><span>Пункт 4.2</span></li>
            <li><span>Пункт 4.3</span></li>
        </ul>
    </li>
    <li><span>Пункт 5</span></li>
</ul>

На выходе хотелось бы получить такой объект (если я правильно понимаю):

{
    0: {title: 'Пункт 1'},
    1: {
        title: 'Пункт 2',
        0: {title: 'Пункт 2.1'},
        1: {
            title: 'Пункт 2.2',
            0: {title: 'Пункт 2.2.1'},
            1: {title: 'Пункт 2.2.2'},
            2: {
                title: 'Пункт 2.2.3',
                0: {title: '2.2.3.1'},
                1: {title: '2.2.3.2'},
            },
        },
        2: {title: 'Пункт 2.3'},
    },
    2: {title: 'Пункт 3'},
    3: {
        title: 'Пункт 4',
        0: {title: 'Пункт 4.1'},
        1: {title: 'Пункт 4.2'},
        2: {title: 'Пункт 4.3'},
    }
}

Я пробовал делать через рекурсию, но не понял как определить, что есть еще потомки на уровни вниз.

Пожалуйста, помогите.
Заранее огромное спасибо!

Comments

[Владимир]

Задачу вверх ногами перевернули.
Сначала делайте JSON, потом отсылайте в базу и рендерите на UI
Опять же, зачем объект с индексами 0, 1, 2 если с этим прекрасно справится массив.

Если хотите решать задачи используя JS, то сначала избавьтесь от "я не силен"
https://www.yakaboo.ua/ua/javascript-polnoe-rukovo...

[Лев Салатов]

Владимир, спасибо за ответ! Да, это будет. Но мне вначале нужно создать это меню, добавить в БД. А потом уже буду выводить на странице редактирование уже из готового JSON.

[Владимир]

https://developer.mozilla.org/en-US/docs/Web/CSS/C...
Ну или найди фрилансера, если тебе разово распарсить страницу нужно.

Answer 1

[profesor08]

Вот пример рекурсии, которая разберет все html элементы и создаст из них json.

const ul = document.querySelector("ul");

const flatAttributes = (attributes) => {
  return Array.from(attributes).reduce((acc, attr) => {
    acc[attr.nodeName] = attr.nodeValue;

    return acc;
  }, {});
};

const toJson = (element) => {
  const node = {
    type: element.nodeName,
    props: flatAttributes(element.attributes),
    children: Array.from(element.children).map(toJson),
  };

  return node;

};

console.log(toJson(ul));

Но стоит отметить, что твою задачу решать надо другим путем. У тебя уже должен быть какой-то json, и работать ты должен с ним. Вносить в него изменения и отображать их в браузере, отправлять на сервер и тд. После перестановок перестраивать json, определять что было переставлено и переставлять.

Comments

[Лев Салатов]

profesor08, спасибо за ответ!

Пытаюсь разобраться с примером. Но не пойму, что нужно изменить, чтобы в JSON записывалось текст li тега.

Насчет другого пути - да, я понимаю. Но страниц 2 страницы:
1. Создание меню. Она пустая. Будут добавляться новые пункты, сортироваться и записываться в БД. Здесь будет создаться новый JSON.
2. Редактирование меню. Здесь я уже будут брать готовый JSON и уже его перестраивать.

[profesor08]

Пытаюсь разобраться с примером. Но не пойму, что нужно изменить, чтобы в JSON записывалось текст li тега.

Посмотри что обозначает element.nodeName, проверяй и получай текстовое содержимое и возвращай его.