Как перебрать объекты с вложенностью?

Question

[intriga93]

чтобы потом можно было создать ul> li>ul> li>ul>li с данными из объекта
https://jsfiddle.net/fLpjkzsw/1/

Answer 1

[0xD34F]

Чтобы дальше два раза одно и то же не писать, небольшой декоратор:

const processNonEmptyObjectOnly = (f, defaultResult) =>
  data => (
    data = data instanceof Object ? Object.entries(data) : [],
    data.length ? f(data) : defaultResult
  );

Собираем разметку:

const createTreeHTML = processNonEmptyObjectOnly(data => `
  <ul>${data.map(n => `
    <li>
      ${n[0]}
      ${createTreeHTML(n[1])}
    </li>`).join('')}
  </ul>`
, '');


document.body.insertAdjacentHTML('beforeend', createTreeHTML(data));

Или, создаём элементы напрямую:

const createTreeElement = processNonEmptyObjectOnly(data =>
  data.reduce((ul, n) => (
    ul.append(document.createElement('li')),
    ul.lastChild.append(n[0], createTreeElement(n[1])),
    ul
  ), document.createElement('ul'))
, '');


document.body.append(createTreeElement(data));

Answer 2

[Stalker_RED]

Comments

[intriga93]

Stalker_RED, спасибо, а зачем br? вроде ж ничего не меняется

[Stalker_RED]

intriga93, да, ul блочный, br не обязательно.

Answer 3

[Антон Шаманов]

вызов функции из функции называется рекурсией