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 とこのプラグインを読み込んで、オブジェクトを表示させたい要素に対して次のように書けば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>

以上です。

  • このエントリーをはてなブックマークに追加
Just a second...