JavaScriptデータフォーマット/プリティプリンター
デバッグ用に人間が読める形式のJavaScriptデータ構造をpretty printする方法を見つけようとしています。
JSに格納されているかなり大きく複雑なデータ構造があり、それを操作するためのコードを作成する必要があります。私が何をしていてどこが間違っているのかを解決するために、本当に必要なのは、データ構造全体を確認し、UIで変更を加えるたびに更新できるようにすることです。
JavaScriptデータ構造を人間が読める文字列にダンプするニースの方法を見つけることは別として、私はこれらすべてを自分で処理できます。 JSONはできますが、実際には適切にフォーマットされインデントされている必要があります。通常、Firebugの優れたDOMダンプを使用しますが、Firebugでは不可能であると思われる構造全体を一度に確認できる必要があります。
どんな提案でも大歓迎です。
前もって感謝します。
出力はインデントされていませんが、JSオブジェクトを読みやすい形式でダンプする関数を作成しましたが、それを追加するのはそれほど難しくないはずです。この関数は、Lua用に作成したもの（はるかに複雑）このインデントの問題を処理しました。
「シンプル」バージョンは次のとおりです。
_function DumpObject(obj)
{
var od = new Object;
var result = "";
var len = 0;
for (var property in obj)
{
var value = obj[property];
if (typeof value == 'string')
value = "'" + value + "'";
else if (typeof value == 'object')
{
if (value instanceof Array)
{
value = "[ " + value + " ]";
}
else
{
var ood = DumpObject(value);
value = "{ " + ood.dump + " }";
}
}
result += "'" + property + "' : " + value + ", ";
len++;
}
od.dump = result.replace(/, $/, "");
od.len = len;
return od;
}
_少し改善していきます。
注1：使用するには、od = DumpObject(something)を実行し、od.dumpを使用します。別の目的のためにlen値（アイテムの数）も必要だったため、複雑になりました。関数が文字列のみを返すようにするのは簡単です。
注2：参照内のループは処理しません。
[〜＃〜] edit [〜＃〜]
インデントされたバージョンを作成しました。
_function DumpObjectIndented(obj, indent)
{
var result = "";
if (indent == null) indent = "";
for (var property in obj)
{
var value = obj[property];
if (typeof value == 'string')
value = "'" + value + "'";
else if (typeof value == 'object')
{
if (value instanceof Array)
{
// Just let JS convert the Array to a string!
value = "[ " + value + " ]";
}
else
{
// Recursive dump
// (replace " " by "\t" or something else if you prefer)
var od = DumpObjectIndented(value, indent + " ");
// If you like { on the same line as the key
//value = "{\n" + od + "\n" + indent + "}";
// If you prefer { and } to be aligned
value = "\n" + indent + "{\n" + od + "\n" + indent + "}";
}
}
result += indent + "'" + property + "' : " + value + ",\n";
}
return result.replace(/,\n$/, "");
}
_再帰呼び出しのある行のインデントを選択し、この行の後にコメント行を切り替えることでスタイルを補強します。
...私はあなたがあなた自身のバージョンをホイップしたのを見ます、それは良いことです。訪問者には選択肢があります。
CrockfordのJSON.stringify を次のように使用します。
var myArray = ['e', {pluribus: 'unum'}];
var text = JSON.stringify(myArray, null, '\t'); //you can specify a number instead of '\t' and that many spaces will be used for indentation...
変数textは次のようになります。
[
"e",
{
"pluribus": "unum"
}
]
ちなみに、これにはJSファイルしか必要ありません。どのライブラリなどでも動作します。
以下を使用できます
<pre id="dump"></pre>
<script>
var dump = JSON.stringify(sampleJsonObject, null, 4);
$('#dump').html(dump)
</script>
Firebugで、単にconsole.debug ("%o", my_object)の場合は、コンソールでそれをクリックして、インタラクティブオブジェクトエクスプローラーを入力できます。オブジェクト全体を表示し、ネストされたオブジェクトを展開できます。
あなたのオブジェクトを見る素晴らしい方法を探している人のために、 check prettyPrint.js
文書のどこかに印刷される表示オプションを設定可能なテーブルを作成します。 consoleよりも見た方が良い。
var tbl = prettyPrint( myObject, { /* options such as maxDepth, etc. */ });
document.body.appendChild(tbl);
私はRhinoでプログラミングを行っていますが、ここに投稿された回答に満足していませんでした。だから私は自分のきれいなプリンターを書いた：
function pp(object, depth, embedded) {
typeof(depth) == "number" || (depth = 0)
typeof(embedded) == "boolean" || (embedded = false)
var newline = false
var spacer = function(depth) { var spaces = ""; for (var i=0;i<depth;i++) { spaces += " "}; return spaces }
var pretty = ""
if ( typeof(object) == "undefined" ) { pretty += "undefined" }
else if ( typeof(object) == "boolean" ||
typeof(object) == "number" ) { pretty += object.toString() }
else if ( typeof(object) == "string" ) { pretty += "\"" + object + "\"" }
else if ( object == null) { pretty += "null" }
else if ( object instanceof(Array) ) {
if ( object.length > 0 ) {
if (embedded) { newline = true }
var content = ""
for each (var item in object) { content += pp(item, depth+1) + ",\n" + spacer(depth+1) }
content = content.replace(/,\n\s*$/, "").replace(/^\s*/,"")
pretty += "[ " + content + "\n" + spacer(depth) + "]"
} else { pretty += "[]" }
}
else if (typeof(object) == "object") {
if ( Object.keys(object).length > 0 ){
if (embedded) { newline = true }
var content = ""
for (var key in object) {
content += spacer(depth + 1) + key.toString() + ": " + pp(object[key], depth+2, true) + ",\n"
}
content = content.replace(/,\n\s*$/, "").replace(/^\s*/,"")
pretty += "{ " + content + "\n" + spacer(depth) + "}"
} else { pretty += "{}"}
}
else { pretty += object.toString() }
return ((newline ? "\n" + spacer(depth) : "") + pretty)
}
出力は次のようになります。
js> pp({foo:"bar", baz: 1})
{ foo: "bar",
baz: 1
}
js> var taco
js> pp({foo:"bar", baz: [1,"taco",{"blarg": "moo", "mine": "craft"}, null, taco, {}], bleep: {a:null, b:taco, c: []}})
{ foo: "bar",
baz:
[ 1,
"taco",
{ blarg: "moo",
mine: "craft"
},
null,
undefined,
{}
],
bleep:
{ a: null,
b: undefined,
c: []
}
}
また、今後の変更が必要になる場合は ここに要点 として投稿しました。
jsDump
jsDump.parse([
window,
document,
{ a : 5, '1' : 'foo' },
/^[ab]+$/g,
new RegExp('x(.*?)z','ig'),
alert,
function fn( x, y, z ){
return x + y;
},
true,
undefined,
null,
new Date(),
document.body,
document.getElementById('links')
])になる
[
[Window],
[Document],
{
"1": "foo",
"a": 5
},
/^[ab]+$/g,
/x(.*?)z/gi,
function alert( a ){
[code]
},
function fn( a, b, c ){
[code]
},
true,
undefined,
null,
"Fri Feb 19 2010 00:49:45 GMT+0300 (MSK)",
<body id="body" class="node"></body>,
<div id="links">
]QUnit （jQueryで使用されるユニットテストフレームワーク）jsDumpのわずかにパッチを当てたバージョンを使用します。
JSON.stringify（）は、場合によっては最良の選択ではありません。
JSON.stringify({f:function(){}}) // "{}"
JSON.stringify(document.body) // TypeError: Converting circular structure to JSON
PhiLhoのリードをとって（ありがとうございました:)）、私は彼が自分のやりたいことをすることができなかったので、自分で書きました。それはかなりラフで準備ができていますが、それは私が必要とする仕事をします。素晴らしい提案をありがとうございました。
それは素晴らしいコードではありませんが、それが価値があることはここにあります。誰かが役に立つかもしれません：
// Usage: dump(object)
function dump(object, pad){
var indent = '\t'
if (!pad) pad = ''
var out = ''
if (object.constructor == Array){
out += '[\n'
for (var i=0; i<object.length; i++){
out += pad + indent + dump(object[i], pad + indent) + '\n'
}
out += pad + ']'
}else if (object.constructor == Object){
out += '{\n'
for (var i in object){
out += pad + indent + i + ': ' + dump(object[i], pad + indent) + '\n'
}
out += pad + '}'
}else{
out += object
}
return out
}
JSON.stringifyの使用に関するJ. Buntingsの応答も良好だと思いました。余談ですが、YUIを使用している場合は、YUIのJSONオブジェクトを介してJSON.stringifyを使用できます。私の場合、HTMLにダンプする必要があったため、PhiLho応答を微調整/カット/ペーストする方が簡単でした。
function dumpObject(obj, indent)
{
var CR = "<br />", SPC = " ", result = "";
if (indent == null) indent = "";
for (var property in obj)
{
var value = obj[property];
if (typeof value == 'string')
{
value = "'" + value + "'";
}
else if (typeof value == 'object')
{
if (value instanceof Array)
{
// Just let JS convert the Array to a string!
value = "[ " + value + " ]";
}
else
{
var od = dumpObject(value, indent + SPC);
value = CR + indent + "{" + CR + od + CR + indent + "}";
}
}
result += indent + "'" + property + "' : " + value + "," + CR;
}
return result;
}
これは本当にJason Buntingの「Use Crockford's JSON.stringify」に対する単なるコメントですが、その答えにコメントを追加することはできませんでした。
コメントに記載されているように、JSON.stringifyはPrototype（www.prototypejs.org）ライブラリとはうまく機能しません。ただし、プロトタイプが追加するArray.prototype.toJSONメソッドを一時的に削除し、Crockfordのstringify（）を実行してから、次のように戻すことで、それらをうまく組み合わせることはかなり簡単です。
var temp = Array.prototype.toJSON;
delete Array.prototype.toJSON;
$('result').value += JSON.stringify(profile_base, null, 2);
Array.prototype.toJSON = temp;
要素を文字列として印刷するためのシンプルなもの：
var s = "";
var len = array.length;
var lenMinus1 = len - 1
for (var i = 0; i < len; i++) {
s += array[i];
if(i < lenMinus1) {
s += ", ";
}
}
alert(s);
私の NeatJSON ライブラリにはRubyと JavaScriptバージョン の両方があります。 （許容）MITライセンスの下で自由に利用できます。オンラインデモ/コンバーターは次の場所で表示できます。
http://phrogz.net/JS/neatjson/neatjson.html
一部の機能（すべてオプション）：
- 特定の幅に折り返します。オブジェクトまたは配列が行に収まる場合、1行に保持されます。
- オブジェクト内のすべてのキーのコロンを揃えます。
- オブジェクトのキーをアルファベット順に並べ替えます。
- 浮動小数点数を特定の小数にフォーマットします。
- ラップするときは、最初と最後の値と同じ行に配列とオブジェクトのオープン/クローズブラケットを配置する「ショート」バージョンを使用します。
- 配列とオブジェクトの空白をきめ細かく制御します（括弧内、コロンとコンマの前後）。
- Webブラウザーで、Node.jsモジュールとして機能します。