1
const data = [
  { itemId: 1, itemName: "пункт №1", itemParentId: 0 },
  { itemId: 2, itemName: "пункт №1.1", itemParentId: 1 },
  { itemId: 3, itemName: "пункт №1.2", itemParentId: 1 },
  { itemId: 4, itemName: "пункт №1.2.1", itemParentId: 3 },
  { itemId: 5, itemName: "пункт №1.2.2", itemParentId: 3 },
  { itemId: 6, itemName: "пункт №1.2.3", itemParentId: 3 },
  { itemId: 7, itemName: "пункт №2", itemParentId: 0 },
  { itemId: 8, itemName: "пункт №3", itemParentId: 0 },
  { itemId: 9, itemName: "пункт №3.1", itemParentId: 8 },
  { itemId: 10, itemName: "пункт №3.2", itemParentId: 8 },
  { itemId: 11, itemName: "пункт №3.3", itemParentId: 8 },
  { itemId: 12, itemName: "пункт №3.3.1", itemParentId: 11 },
  { itemId: 13, itemName: "пункт №3.3.1.1", itemParentId: 12 },
  { itemId: 14, itemName: "пункт №3.3.1.2", itemParentId: 12 },
  { itemId: 15, itemName: "пункт №3.3.1.3", itemParentId: 12 },
  { itemId: 16, itemName: "пункт №3.3.2", itemParentId: 11 },
  { itemId: 17, itemName: "пункт №4", itemParentId: 0 },
  { itemId: 18, itemName: "пункт №5", itemParentId: 0 },
  { itemId: 19, itemName: "пункт №5.1", itemParentId: 18 }
]

function parseList(data) {
    data.reduce((acc, current, i, source) => {
        const $li = document.createElement('li')
    $li.textContent = current.itemName
    
    acc[current.itemParentId].children[0].appendChild($li)
    
    if (source[i + 1] && source[i + 1].itemParentId === current.itemId) {
      const $ul = document.createElement('ul') 
      $li.appendChild($ul)
    }
    
    acc[i + 1] = $li
    
    return acc
  }, { 0: { children: [document.querySelector('ul')] } })
}

parseList(data)

1 ответ 1

1

Например можно так

const data = [
  { itemId: 1, itemName: "пункт №1", itemParentId: 0 },
  { itemId: 2, itemName: "пункт №1.1", itemParentId: 1 },
  { itemId: 3, itemName: "пункт №1.2", itemParentId: 1 },
  { itemId: 4, itemName: "пункт №1.2.1", itemParentId: 3 },
  { itemId: 5, itemName: "пункт №1.2.2", itemParentId: 3 },
  { itemId: 6, itemName: "пункт №1.2.3", itemParentId: 3 },
  { itemId: 7, itemName: "пункт №2", itemParentId: 0 },
  { itemId: 8, itemName: "пункт №3", itemParentId: 0 },
  { itemId: 9, itemName: "пункт №3.1", itemParentId: 8 },
  { itemId: 10, itemName: "пункт №3.2", itemParentId: 8 },
  { itemId: 11, itemName: "пункт №3.3", itemParentId: 8 },
  { itemId: 12, itemName: "пункт №3.3.1", itemParentId: 11 },
  { itemId: 13, itemName: "пункт №3.3.1.1", itemParentId: 12 },
  { itemId: 14, itemName: "пункт №3.3.1.2", itemParentId: 12 },
  { itemId: 15, itemName: "пункт №3.3.1.3", itemParentId: 12 },
  { itemId: 16, itemName: "пункт №3.3.2", itemParentId: 11 },
  { itemId: 17, itemName: "пункт №4", itemParentId: 0 },
  { itemId: 18, itemName: "пункт №5", itemParentId: 0 },
  { itemId: 19, itemName: "пункт №5.1", itemParentId: 18 }
]


function parseList(data, acc) {
  if (data.length > 0) {
    let current  = data.shift();
    const $li = document.createElement('li');
    $li.textContent = current.itemName;
    
    acc[current.itemParentId].children[0].appendChild($li);
    
    if (data[0] && data[0].itemParentId === current.itemId) {
      const $ul = document.createElement('ul') 
      $li.appendChild($ul)
    }
    
    acc[current.itemId] = $li;
    parseList(data, acc);
  }
}

parseList(data, { 0: document.querySelector('div')})
<div><ul></ul></div>

5
  • Спасибо, а если ни секрет какой у тебя уровень синьор или мидл ?
    – jora
    3 июн 2021 в 13:31
  • 1
    секрета нет - архитектор 3 июн 2021 в 13:32
  • @jora я бы конечно реализовал это по другому. Но реализовал Ваш вариант через рекурсию 3 июн 2021 в 13:33
  • это выше синьора ?
    – jora
    3 июн 2021 в 13:34
  • Да немного, совсем чуточку :)) 3 июн 2021 в 13:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.