javascript jsonデータを再帰的に表示する

javascript jsonデータを再帰的に表示する

javascriptで、jsonデータを再帰的に表示するサンプルコードを記述してます。関数を作成してその関数内でも再帰的に同じ関数を呼び出していくことで表示することができます。

環境

  • OS windows11 home
  • ブラウザ chrome 109.0.5414.120

jsonデータを再帰的に表示する

jsonデータを再帰的に表示するには、関数内でも再帰的に同じ関数を呼び出して表示します。

let obj = {
    sample: {
        a: 1,
        b: 2,
        c: {
            ca: 1,
            cb: 2
        }
    }
}

function getKey(json, name = "") {

    for (let key in json) {

        if (typeof json[key] == "object") {            
            getKey( json[key], name + " " + key )
        } else {                        
            console.log( name.trimStart() + " " + key + " : " + json[key] );
        }
    }

}

getKey(obj);

実行結果

階層的になっていなくても取得できます。

let obj = {
    sample: {
        a: 1,
        b: 2
    }
}

function getKey(json, name = "") {

    for (let key in json) {

        if (typeof json[key] == "object") {            
            getKey( json[key], name + " " + key )
        } else {                        
            console.log( name.trimStart() + " " + key + " : " + json[key] );
        }
    }

}

getKey(obj);

実行結果

サンプルコード

以下は、
ボタンをクリックすると、jsonデータを再帰的に取得して結果を表示する
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。関数はアロー関数で記述してます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container text-center w-50" style="margin-top:150px">

    <h2><span class="badge badge-danger">jsonデータを表示</span></h2>
    <ul id="txt" class="list-group w-50 mx-auto"></ul>

    <button onclick="hoge();" id="btn" type="button" class="btn btn-success mt-1">
      表示
    </button>

  </div>

  <script>

    const obj = {
      sample: {
        a: 1,
        b: 2,
        c: {
          ca: 1,
          cb: 2
        }
      }
    }

    // 表示用の配列
    let text = [];

    const getKey = (json, name = "") => {

      for (let key in json) {

        if (typeof json[key] == "object") {
          getKey(json[key], name + " " + key)
        } else {
          text.push('<li class="list-group-item">' + name.trimStart() + " " + key + " : " + json[key] + '</li>');
        }

      }

    }

    const hoge = () => {

      text = [];

      getKey(obj);

      //innerHTMLを使用して表示    
      txt.innerHTML = text.join('');

    }

  </script>
</body>

</html>

結果が取得されていることが確認できます。