การสร้างรายการแบบไม่มีลำดับ (ul) แบบซ้อนกันจากอาร์เรย์ซ้อนใน JavaScript

มีอาร์เรย์ซ้อนที่ประกอบด้วยค่าตัวอักษรและอาร์เรย์ย่อย ต้องเขียนโปรแกรม JavaScript ที่แปลงอาร์เรย์นี้เป็นรายการ HTML <ul> แบบซ้อนกัน โดยโครงสร้างการซ้อนของ <ul> ต้องตรงกับโครงสร้างอาร์เรย์ทุกประการ

ตัวอย่างโค้ด

JavaScript Code

const arr = [
  'Value 1',
  ['Inner value 1', 'Inner value 2', 'Inner value 3', 'Inner value 4'],
  'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6'
];

const prepareUL = (root, arr) => {
  let ul = document.createElement('ul');
  let li;
  root.appendChild(ul);
  arr.forEach(function(item) {
    if (Array.isArray(item)) {
      prepareUL(li, item);
      return;
    }
    li = document.createElement('li');
    li.appendChild(document.createTextNode(item));
    ul.appendChild(li);
  });
};

const div = document.getElementById('myList');
prepareUL(div, arr);

HTML Code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="myList"></div>
</body>
</html>

ผลลัพธ์

ผลลัพธ์จะเป็นรายการ ul ซ้อนกันตามโครงสร้างอาร์เรย์ (ดูภาพตัวอย่าง)