【JavaScript】 Jsonを整形する方法

js

JavaScriptを使ってJsonのフォーマットを整形する方法を紹介します。イメージとしてはSQLを整形するような感じのアレに似ています。

[スポンサーリンク]

今回紹介する方法は、基本、JavaScript一文で実現することが可能です。とても簡単に出来るので、開発している時の片手間に自分用テスト用ツールを作ることも十分に出来るかと思います。

このページでは、Jsonのフォーマットを整形する方法と、実際に動かすことの出来るサンプルも置いておきます。

このページでやること

JavaScriptを使って、Jsonを整形する方法を紹介します。

Jsonを整形するプログラム

JavaScriptの部分のみをピックアップしました。
Jsonを整形しているロジックは4行目になります。

<script type="text/javascript">
    var text = "{\"aaa\":\"ccc\", \"bbb\":[{\"ddd\":1,\"eee\":2},{\"ddd\":3,\"eee\":4}]}"
    var jsonBefore = JSON.parse(text);
    var json = JSON.stringify(jsonBefore, null, "    ")
    alert(json);
</script>

デモ

実際に動かすことが出来ます

解説

JSON.stringify(jsonBefore, null, "    ")の第三引数で、Json整形時のインデントを指定しています。
サンプルは、半角スペース4つでインデントされます。

Jsonを整形するプログラムの全て

先ほどのプログラムを使った全バージョンのものです。こちらのソースをコピペすれば動きます。
jQueryを使っていますが、使わなくてもJsonの整形は出来ます。

<!doctype html>
<html>
<head>
<meta charset="utf-8" content="">
<title>Jsonの整形</title>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>


<!-- スクリプト部分 -->
<script type="text/javascript">
	$(function () {
		$('#execute-button').click(function() {
			var text = $( '#input_json' ).val();
			var jsonBefore = JSON.parse(text);
			var json = JSON.stringify(jsonBefore, null, "    ")
			$( '#input_json' ).val(json);
		});
	});

</script>
 
</head>
 
 
<!-- HTML部分 -->
<body bgcolor="#e2e2e2">
 
<textarea cols="40" rows="30" id="input_json" >{"aaa":"ccc", "bbb":[{"ddd":1,"eee":2},{"ddd":3,"eee":4}]}</textarea>
<br/>
<button type="button" id="execute-button">
	<div class="size-24">Jsonを整形するよ</div>
</button>

</body>
</html>

さいごに

Json形式のAPIを開発しているときは、こういうプログラムがあると大変助かります。
これぐらいの簡単さであれば、自分用にサクっと作れてうれしいですね。

わたしが以前作成しました、Json形式チェックのWebツールも今回紹介した方法でJsonの整形をしています。
それでは!