JavaScript のオブジェクトの中身を表示する jQueryプラグイン

いや、全然大したものではないのですが、自分が JavaScript のオブジェクトの中身を見たい時に、たまに使っているコードを jQuery のプラグインの形にしてみました。

コードは次のとおりです。

$.fn.extend({
 printObj: function(obj, objStr) {
 var objName = $('<p/>').text(objStr).css({'fontWeight': 'bold', 'fontSize': '120%'});
 var props = $('<dl/>');
 for (var prop in obj){
 $(props).append('<dt><em>' + prop + '</em></dt><dd>' + obj[prop] + '</dd>');
 }
 $(this).append(objName).append(props);
 }
});

jQuery.printObj.js

jQuery とこのプラグインを読み込んで、オブジェクトを表示させたい要素に対して次のように書けばOKです。

$(セレクター).printObj(オブジェクト変数, 'オブジェクト変数');

例えば、<div id="footer">の中に「fileObj」というオブジェクトの中身を表示させたいときは、次のように書きます。

$('#footer').printObj(fileObj, 'fileObj');

すると、以下のように最初にオブジェクト名、その下にプロパティと値がdl要素で出力されます（結果はあくまで例です）。

fileObj

type
 null
creationDate
 [object Object]
filePath
 /cms/mt50/mt-static/plugins/UploadifyForMT/uploadify/uploads/add.png
modificationDate
 [object Object]
name
 add.png
size
 733

書き出されるコードは次のとおりです。

<p style="font-weight: bold; font-size: 120%;">オブジェクト名</p>
<dl>
　　　　<dt><em>プロパティ</em></dt>
　　　　<dd>値</dd>
</dl>

以上です。

「JavaScript」カテゴリの記事一覧