Как зациклить перебор массива объектов до выполнения условия?

Question

К примеру у нас есть следующий массив объектов:

const arr = [
  {
    'prop1': 'value1',
    'children': [
      {
        'prop1': 'value2'
      },
      {
        'prop1': 'value3',
        'children': [
          {
            'prop1': 'value4'
          }
        ]
      }
    ]
  },
  {
    'prop1': 'value5',
    'children': [
      {
        'prop1': 'value6',
        'children': null
      }
    ]
  }
];

Нам нужно вывести вложенный список значений по prop1. Вложенность определяется 'children'. Я вывел основной список следующим образом:

let list = document.createElement('ul');
let listCont;

function createList(arr) {
  arr.forEach((el) => {
      listCont = document.createElement('li');
      listCont.innerText = el.title;
      list.appendChild(listCont);
  })
}
createList(data);

Как мне стоит дальше зацикливать перебор, что бы вывести заголовки на след. уровнях вложенности, и переходить снова на основною вложенность, при children == null?

В результате должно получиться такой список:

Answer 1

Напрашивается рекурсия:

const arr = testArr();

let html = (
  "<ul>" +
  
  arr.map(function convert_li(obj) {
    let ul = "";
    if( obj.children ) {
      ul = "<ul>" + obj.children.map(convert_li).join("") + "</ul>";
    }

    return '<li>' + obj.prop1 + ul + '</li>';
  }).join("")
  
  + "</ul>"
);

document.body.innerHTML = html;

/***/

function testArr() {
  return [{
      'prop1': 'value1',
      'children': [{
          'prop1': 'value2'
        },
        {
          'prop1': 'value3',
          'children': [{
            'prop1': 'value4'
          }]
        }
      ]
    },
    {
      'prop1': 'value5',
      'children': [{
        'prop1': 'value6',
        'children': null
      }]
    }
  ];
}

БЛОГ НА HUSL

Как зациклить перебор массива объектов до выполнения условия?

Ответы (1 шт):