다음과 같은 중첩 배열이 있다고 가정해 보겠습니다. -
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' ];
이러한 리터럴 배열의 중첩 배열을 HTML의 중첩되지 않은 목록에 매핑하는 JavaScript 프로그램을 작성해야 합니다.
여기서 처리해야 할 유일한 것은 ul의 중첩이 배열의 중첩과 동일해야 한다는 것입니다.
예시
이에 대한 코드는 -
자바스크립트 코드 -
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 코드 -
<!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>
출력
그리고 출력은 -
