JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

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'
];

このような任意のネストされた配列を受け取り、その構造に合わせてHTMLの順序なしリスト（ul）へ変換するJavaScriptプログラムを作成してみましょう。

ここで注意すべきポイントはただ一つ、生成されるulのネスト構造が、元の配列のネスト構造と完全に一致していなければならないという点です。

実装のアプローチ

この問題は再帰処理を使うことでエレガントに解決できます。処理の流れは以下の通りです。

  • 新しいul要素を作成し、親要素に追加します。
  • forEachで配列の各要素を走査します。
  • 要素が配列である場合（Array.isArray()で判定）、直前に作成したliを親として関数自身を再帰的に呼び出し、入れ子のリストを生成します。
  • 要素が文字列などの値である場合は、新しいli要素を作成してテキストノードを追加し、ulに追加します。

コード例

JavaScriptコード

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)) {
            // 要素が配列なら、直前のliの中に再帰的にリストを生成
            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>

出力結果

上記のコードを実行すると、配列のネスト構造をそのまま反映した次のようなリストが出力されます。

JavaScript：ネストされた配列をもとに入れ子の順序なしリスト（ul）を作成するには？

  • Value 1
    • Inner value 1
    • Inner value 2
    • Inner value 3
    • Inner value 4
  • Value 2
  • Value 3
  • Value 4
  • Value 5
  • Value 6
  1. 【JavaScript】NodeList（ノードリスト）を配列に変換する方法をわかりやすく解説

    JavaScriptでdocument.querySelectorAll()などのDOM操作メソッドを使うと、戻り値として「NodeList（ノードリスト）」と呼ばれるノードのコレクションが返されます。NodeListは配列に似ていますが、map()やfilter()などArrayオブジェクトが持つ便利なメソッドの多くを使用できません。そこで実践では、NodeListを本物の配列に変換してから操作するのが一般的です。 NodeListを配列に変換する主な方法 1. Array.from() を使う 最もシンプルで広く使われている方法です。NodeListを渡すと、それをもとにした新しい配列を生

  2. JavaScriptで値に基づいてオブジェクトをグループ化する方法

    JavaScriptでは、reduce()メソッドを活用することで、配列内のオブジェクトを特定の値（プロパティ）に基づいて効率的にグループ化できます。たとえば、複数人のデータを「年齢」ごとにまとめたい場合などに役立ちます。ここでは、実際に動作するサンプルコードをもとに、実装手順と仕組みをわかりやすく解説します。 サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewpo