プログラミングで飯を食え。腕をあげたきゃ備忘録!

PHP、JavaScript、HTML5、CSS3などWEB系言語を中心に基本テク、備忘録をまとめます。Android、Iphoneアプリ開発についても!

jQueryでPHPのprint_r(),var_dump()する方法!

サクウェブTVはコチラ↓↓↓
サクウェブTV

PHPで使用するprint_r()やvar_dump()は非常に便利です。

配列や変数の中身を視覚的に見られるのでPHPでの開発中には頻繁に利用すると思います。

ただ、それがJavaScriptではできないので作りました。

以下のコードをprint_r.jsとして保存してください。

print_r.js
(function($) {
    $.extend({
		print_r: function print_r( obj, dst) {
				function dump(arr,level) {
					var ret = "";
					if(!level) level = 0;
					if(level >= 30) {
						return "Nesting too deep\n";
					}
					
					//The padding given at the beginning of the line.
					var level_padding = "";
					for(var j=0;j<level;j++) level_padding += "    ";

					if(arr == null)	{ //null
						ret = "null\n";
					} else if(typeof(arr) == 'object') { //Array/Hashes/Objects 
						if (arr.constructor == Array) {
							ret += level_padding + "Array\n";
						} else if ( arr.constructor == Object ) {
							ret += level_padding + "Object\n";
						} else {
							ret += level_padding + "Other " + arr.toString() + "\n";
							return ret;
						}
						ret += level_padding + "(\n";
						for(var item in arr) {
							var value = arr[item];
							if(typeof(value) == 'object') { //If it is an array,
								ret += level_padding + "    [" + item + "] =>\n";
								ret += dump(value,level+2);
							} else {
								ret += level_padding + "    [" + item + "] => "
								         + value + "\n";
							}
						}
						ret += level_padding + ")\n";
					} else if(typeof(arr) == 'function') { // function
						ret = arr+"\n";
					} else { //Stings/Chars/Numbers etc.
						ret = arr+"\n";
					}
					return ret;
				}
				function parseStr( src) {
					
					src = src.replace(/&/g, "&amp;");
					src = src.replace(/ /g, "&nbsp;");
					src = src.replace(/</g, "&lt;");
					src = src.replace(/>/g, "&gt;");
					src = src.replace(/\n/g, "<br />");
					
					return src;
				}


				if (typeof(dst) == "undefined")	{
					$("body").append(parseStr(dump(obj)));
				} else if (typeof(dst) == "string") {
					 $("#" + dst).append(parseStr(dump(obj)));
				} else if (typeof(dst) == "boolean" && dst == true) {
					alert(dump(obj));
				}
			}
	});
})(jQuery);

その後、

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="print_r.js"></script>
<script type="text/javascript" src="script.js"></script>

のように読み込んで、script.jsで、

script.js
$(function(){
    var json = [
        {"A":"apple","B":"orange","C":"banana"},
        {"A":"piano","B":"guiter","C":"viorin"},
        {"A":"table","B":"bed","C":"bath"},
    ];
    
    $.print_r(json);
);

のような形で使用します。

第2引数については

指定なし : documentに書き出す

id名を指定 : 指定したidのタグに出力

trueを指定 : alert()で出力する

です。