JavaScript veri biçimlendirme / güzel yazıcı

pretty printHata ayıklama için insan tarafından okunabilir bir biçimde JavaScript veri yapısının bir yolunu bulmaya çalışıyorum .

JS'de depolanan oldukça büyük ve karmaşık bir veri yapım var ve onu işlemek için biraz kod yazmam gerekiyor. Ne yaptığımı ve nerede yanlış gittiğimi anlamak için gerçekten ihtiyacım olan şey, veri yapısını bütünüyle görebilmek ve kullanıcı arayüzü aracılığıyla her değişiklik yaptığımda onu güncelleyebilmek.

JavaScript veri yapısını insan tarafından okunabilir bir dizeye dökmenin güzel bir yolunu bulmanın dışında, tüm bunları kendim halledebilirim. JSON yapardı, ancak gerçekten güzel bir şekilde biçimlendirilmesi ve girintilendirilmesi gerekiyor. Bunun için genellikle Firebug'ın mükemmel DOM dökümünü kullanırdım, ancak gerçekten tüm yapıyı aynı anda görebilmem gerekiyor, ki bu Firebug'da mümkün görünmüyor.

Herhangi bir öneriye açığız.

Şimdiden teşekkürler.

Bir JS nesnesini okunabilir bir biçimde dökmek için bir işlev yazdım, ancak çıktı girintili olmasa da, bunu eklemek çok zor olmamalı: Bu işlevi Lua için yaptığım bir işlevden yaptım (ki bu çok daha karmaşık ) bu girinti sorununu ele alan.

İşte "basit" versiyon:

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;
}

Biraz geliştirmeye bakacağım.
Not 1: Kullanmak od = DumpObject(something)için od.dump yapın ve kullanın. Konvolüsyonlu çünkü len değerini (öğe sayısı) başka bir amaç için istedim. İşlevin yalnızca dizgeyi döndürmesi önemsizdir.
Not 2: Referanslardaki döngüleri işlemez.

DÜZENLE

Girintili versiyonu yaptım.

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$/, "");
}

Yinelemeli çağrı ile satırdaki girintinizi seçin ve bundan sonra yorumlu satırı değiştirerek stili destekleyin.

... kendi versiyonunu hazırladığını görüyorum, ki bu iyi. Ziyaretçilerin bir seçeneği olacak.

Crockford'un JSON.stringify'ını şu şekilde kullanın :

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...

Değişken textşuna benzer:

[
  "e",
   {
      "pluribus": "unum"
   }
]

Bu arada, bu JS dosyasından fazlasını gerektirmez - herhangi bir kitaplıkla vb. Çalışacaktır.

Aşağıdakileri kullanabilirsiniz

<pre id="dump"></pre>
<script>
   var dump = JSON.stringify(sampleJsonObject, null, 4); 
   $('#dump').html(dump)
</script>

İçinde Firebug, sadece console.debug ("%o", my_object)konsolda üzerine tıklayabilir ve etkileşimli bir nesne gezgini girebilirsiniz. Tüm nesneyi gösterir ve iç içe geçmiş nesneleri genişletmenize izin verir.

Node.js için şunu kullanın:

util.inspect(object, [options]);

API Belgeleri

Nesnenizi görmenin harika bir yolunu arayanlar için prettyPrint.js'yi kontrol edin

Dokümanınızın herhangi bir yerine yazdırılacak, yapılandırılabilir görünüm seçeneklerine sahip bir tablo oluşturur. Bakmaktan daha iyi console.

var tbl = prettyPrint( myObject, { /* options such as maxDepth, etc. */ });
document.body.appendChild(tbl);

Programlıyorum Rhinove burada yayınlanan cevapların hiçbirinden memnun kalmadım. Bu yüzden kendi güzel yazıcımı yazdım:

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)
}

Çıktı şuna benzer:

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: []
    }
}

Ayrıca, gelecekte gerekli olabilecek değişiklikler için burada bir Özet olarak yayınladım .

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')
])

olur

[
   [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 tarafından kullanılan birim testi çerçevesi) jsDump'ın biraz yamalı sürümünü kullanan.

JSON.stringify () bazı durumlarda en iyi seçim değildir.

JSON.stringify({f:function(){}}) // "{}"
JSON.stringify(document.body)    // TypeError: Converting circular structure to JSON

PhiLho'nun öncülüğünü alarak (çok teşekkürler :)), istediğim şeyi tam olarak yapamadığım için kendi başıma yazdım. Oldukça sert ve hazır, ama ihtiyacım olan işi yapıyor. Mükemmel önerileriniz için hepinize teşekkür ederim.

Harika bir kod değil, biliyorum, ama değeri ne olursa olsun, işte burada. Birisi onu faydalı bulabilir:

// 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
}

Bu gerçekten Jason Bunting'in "Crockford'un JSON.stringify'ını kullan" üzerine bir yorum, ancak bu yanıta bir yorum ekleyemedim.

Yorumlarda belirtildiği gibi JSON.stringify, Prototype (www.prototypejs.org) kitaplığıyla iyi oynamıyor. Bununla birlikte, prototipin eklediği Array.prototype.toJSON yöntemini geçici olarak kaldırarak, Crockford'un stringify () yöntemini çalıştırarak ve ardından şu şekilde geri koyarak birlikte iyi oynamalarını sağlamak oldukça kolaydır:

  var temp = Array.prototype.toJSON;
  delete Array.prototype.toJSON;
  $('result').value += JSON.stringify(profile_base, null, 2);
  Array.prototype.toJSON = temp;

J. Buntings'in JSON.stringify'ı kullanma konusundaki tepkisinin de iyi olduğunu düşündüm. YUI kullanıyorsanız, JSON.stringify'ı YUIs JSON nesnesi aracılığıyla kullanabilirsiniz. Benim durumumda, PhiLho yanıtını ince ayar / kesme / yapıştırma daha kolay olması için HTML'ye dökmem gerekiyordu.

function dumpObject(obj, indent) 
{
  var CR = "<br />", SPC = "&nbsp;&nbsp;&nbsp;&nbsp;", 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;
}

Bu ileti dizisinde kod yazan birçok insan, çeşitli aldatmalarla ilgili birçok yorum yaptı. Bu çözümü beğendim çünkü eksiksiz görünüyordu ve bağımlılığı olmayan tek bir dosyaydı.

tarayıcı

nodejs

"Kutudan çıkar çıkmaz" işe yaradı ve hem düğüm hem de tarayıcı sürümlerine sahip (muhtemelen sadece farklı sarmalayıcılar ama onaylamak için kazmadım).

Kitaplık ayrıca oldukça iyi yazdırılan XML, SQL ve CSS'yi de destekliyor, ancak bu özellikleri denemedim.

Öğeleri dizeler olarak yazdırmak için basit bir yöntem:

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);

Benim NeatJSON kütüphane hem Yakut ve sahip JavaScript sürümlerini . Bir (izin verilen) MIT Lisansı altında ücretsiz olarak temin edilebilir. Çevrimiçi bir demo / dönüştürücüyü şu adreste görüntüleyebilirsiniz:
http://phrogz.net/JS/neatjson/neatjson.html

Bazı özellikler (tümü isteğe bağlı):

• Belirli bir genişliğe sarın; bir nesne veya dizi satıra sığabiliyorsa, tek satırda tutulur.
• Bir nesnedeki tüm tuşlar için iki nokta üst üste işaretlerini hizalayın.
• Anahtarları alfabetik olarak bir nesneye göre sıralayın.
• Kayan nokta sayılarını belirli bir ondalık sayı olarak biçimlendirin.
• Kaydırırken, diziler ve nesneler için açma / kapama parantezlerini ilk / son değerle aynı satıra koyan 'kısa' bir sürüm kullanın.
• Diziler ve nesneler için boşlukları ayrıntılı bir şekilde kontrol edin (köşeli parantez içinde, iki nokta üst üste ve virgülden önce / sonra).
• Web tarayıcısında ve Node.js modülü olarak çalışır.

flexjson , size istediğinizi verebilecek bir prettyPrint () işlevi içerir.