javascript jsonデータを再帰的に表示する
- 作成日 2022.06.30
- 更新日 2023.01.26
- javascript
- javascript
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>
結果が取得されていることが確認できます。
-
前の記事
VBA シートを削除する 2022.06.30
-
次の記事
MySQL 指定したテーブルのdumpファイルを作成する 2022.06.30
コメントを書く