Как организовать дерево категорий из json ответа с полями nested sets?

Question

[Никита Решетняк]

Добрый день! Делаю импорт категории товаров из апи поставщика. При запросе категории товаров получаю json полный вывод можно посмотреть тут https://api.al-style.kz/api/categories

Хочу получить меню такого вида


На скрине заполненно тестовыми данными 2мя циклами шаблонные поля апендятся в родителя

Сначала планировал проходится по ответу подразумевая что категории идут одна за одной и проверкой находжени правого значения в диапазоне значений предыдущего элемента строить подменю. Позже заметил что есть провал то есть идут в ряд до 9 после левое значение сразу 12. Как при дальнейшем находжени 12-13 вклинить его в первую категорию не придумал. На ум пришло только строить как есть и постоянно проверять дерево категорий при получении новой. То есть получили первую 1-20 добавили, получили вторую 2-3 проверили дерево нашли куда помещается с апендили и так далее. Но чувствую что это не то.

Подскажите пожалуйста как можно эффективнее пройтись по ответу и собрать дерево категорий как на скрине

Comments

[Сергей Сергей]

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

Answer 1

[0xD34F]

Собираете из плоского массива дерево:

const createTreeFromNestedSets = arr => [...arr]
  .sort((a, b) => a.left - b.left)
  .reduce((acc, n) => {
    while (acc.at(-1).at(-1).right < n.left) {
      acc.pop();
    }

    if (acc.at(-1).at(-1).right > n.left) {
      acc.push(acc.at(-1).at(-1).children);
    }

    acc.at(-1).push({ ...n, children: [] });

    return acc;
  }, [ [ { left: -Infinity, right: Infinity, children: [] } ] ])
  [0][0].children;

Затем из дерева собираете разметку:

const createTreeHTML = (arr, nodeTemplate) =>
  Array.isArray(arr) && arr.length
    ? `<ul>${arr.map(n => `
         <li>
           ${nodeTemplate(n)}
           ${createTreeHTML(n.children, nodeTemplate)}
         </li>`).join('')}
       </ul>`
    : '';

Которую вставляете куда там вам надо:

containerElement.insertAdjacentHTML('beforeend', createTreeHTML(
  createTreeFromNestedSets(data),
  item => `<input data-id="${item.id}" type="checkbox">${item.name}`
));

Comments

[Никита Решетняк]

Благодарю, буду пробовать

[0xD34F]

Никита Решетняк, ваше "буду пробовать" на хрен тут никому не упёрлось. Когда попробуете - тогда и говорите. Не надо тратить впустую чужое время.

[Никита Решетняк]

0xD34F, Все, получилось! Спасибо за решение

[Никита Решетняк]

0xD34F, Все таки есть вопрос возможно ли как то в итоговой структуре изменить первый и последующие элементы сейчас получаю

<fieldset>​
	<input data-id=​ "3633" type=​ "checkbox">​"Мобильные телефоны и аксессуары "
	<input data-id=​ "3638" type=​ "checkbox">​"Мобильные телефоны "
	<input data-id=​ "3639" type=​ "checkbox">​"Портативные зарядные устройства "
	<input data-id=​ "3637" type=​ "checkbox">​"Кабели "
	<input data-id=​ "3634" type=​ "checkbox">​"Зарядные устройства "
	<input data-id=​ "21286" type=​ "checkbox">​"Защитные стёкла и плёнки "
	<input data-id=​ "20538" type=​ "checkbox">​"Чехлы "
	<input data-id=​ "3640" type=​ "checkbox">​"Прочее "
</fieldset>

Код формирующий структуру

const createTreeHTML = (arr, nodeTemplate) => `
            ${arr.map(n => `
                ${n.children.length ? '<fieldset>' : ''}

                ${nodeTemplate(n)}
                ${n.children.length ?  createTreeHTML(n.children, nodeTemplate) : createTreeHTML(n.children, nodeTemplate)}

                ${n.children.length ? '</fieldset>' : ''}`
        ).join('')}
          `;

желаемое

<fieldset>​
	<legend><input data-id=​ "3633" type=​ "checkbox" class="all_check">Мобильные телефоны и аксессуары "</legend>
	<label> <input data-id=​ "3638" type=​ "checkbox" class="subcat">​"Мобильные телефоны "</label>
	<label> <input data-id=​ "3639" type=​ "checkbox" class="subcat">​"Портативные зарядные устройства "</label>
	<label> <input data-id=​ "3637" type=​ "checkbox" class="subcat">​"Кабели "</label>
	<label> <input data-id=​ "3634" type=​ "checkbox" class="subcat">​"Зарядные устройства "</label>
	<label> <input data-id=​ "21286" type=​ "checkbox" class="subcat">​"Защитные стёкла и плёнки "</label>
	<label> <input data-id=​ "20538" type=​ "checkbox" class="subcat">​"Чехлы "</label>
	<label> <input data-id=​ "3640" type=​ "checkbox" class="subcat">​"Прочее "</label>
</fieldset>

Или же будет проще про обработке галочек искать первые элементы что бы снять галочки со все группы?

[0xD34F]

Никита Решетняк, коллбек map'а принимает индекс. Можете возвращать различную разметку в зависимости от индекса.