Memformat data JavaScript / printer cantik

Saya mencoba menemukan cara untuk pretty printstruktur data JavaScript dalam bentuk yang dapat dibaca manusia untuk debugging.

Saya memiliki struktur data yang agak besar dan rumit yang disimpan di JS dan saya perlu menulis beberapa kode untuk memanipulasinya. Untuk mengetahui apa yang saya lakukan dan di mana kesalahan saya, yang benar-benar saya butuhkan adalah untuk dapat melihat struktur data secara keseluruhan, dan memperbaruinya setiap kali saya melakukan perubahan melalui UI.

Semua hal ini dapat saya tangani sendiri, selain dari menemukan cara yang bagus untuk membuang struktur data JavaScript ke string yang dapat dibaca manusia. JSON akan melakukannya, tetapi itu benar-benar perlu diformat dan indentasi dengan baik. Saya biasanya menggunakan barang-barang DOM Firebug yang sangat baik untuk ini, tetapi saya benar-benar harus dapat melihat seluruh struktur sekaligus, yang sepertinya tidak mungkin di Firebug.

Setiap saran dipersilahkan.

Terima kasih sebelumnya.

Saya menulis sebuah fungsi untuk membuang objek JS dalam bentuk yang dapat dibaca, meskipun hasilnya tidak menjorok, tetapi seharusnya tidak terlalu sulit untuk menambahkan bahwa: Saya membuat fungsi ini dari yang saya buat untuk Lua (yang jauh lebih kompleks ) yang menangani masalah indentasi ini.

Ini adalah versi "sederhana":

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

Saya akan melihat sedikit meningkatkannya.
Catatan 1: Untuk menggunakannya, lakukan od = DumpObject(something)dan gunakan od.dump. Berbelit-belit karena saya ingin nilai len juga (jumlah item) untuk tujuan lain. Itu sepele untuk membuat fungsi mengembalikan hanya string.
Catatan 2: itu tidak menangani loop dalam referensi.

EDIT

Saya membuat versi lekukan.

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

Pilih lekukan Anda di telepon dengan panggilan rekursif, dan Anda menahan gaya dengan mengganti saluran yang dikomentari setelah ini.

... Saya melihat Anda menyiapkan versi Anda sendiri, yang bagus. Pengunjung akan punya pilihan.

Gunakan Crockford's JSON.stringify seperti ini:

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

Variabel textakan terlihat seperti ini:

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

Ngomong-ngomong, ini tidak membutuhkan lebih dari file JS - itu akan bekerja dengan perpustakaan apa pun, dll

Anda dapat menggunakan yang berikut ini

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

Di Firebug, jika Anda baru saja console.debug ("%o", my_object)dapat mengkliknya di konsol dan masukkan penjelajah objek interaktif. Ini menunjukkan seluruh objek, dan memungkinkan Anda memperluas objek bersarang.

Untuk Node.js, gunakan:

util.inspect(object, [options]);

Dokumentasi API

Bagi mereka yang mencari cara luar biasa untuk melihat objek Anda, periksa prettyPrint.js

Membuat tabel dengan opsi tampilan yang dapat dikonfigurasi untuk dicetak di suatu tempat di dokumen Anda. Lebih baik dilihat daripada di console.

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

Saya sedang pemrograman Rhinodan saya tidak puas dengan jawaban yang diposting di sini. Jadi saya sudah menulis printer cantik saya sendiri:

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

Outputnya terlihat seperti ini:

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

Saya juga mempostingnya sebagai Intisari untuk perubahan apa pun di masa depan yang mungkin diperlukan.

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

menjadi

[
   [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 (Kerangka kerja pengujian unit yang digunakan oleh jQuery) menggunakan versi jsDump yang sedikit ditambal.

JSON.stringify () bukan pilihan terbaik pada beberapa kasus.

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

Mengambil pimpinan PhiLho (terima kasih banyak :)), saya akhirnya menulis sendiri karena saya tidak bisa membuatnya melakukan apa yang saya inginkan. Ini cukup kasar dan siap, tetapi itu pekerjaan yang saya butuhkan. Terima kasih atas saran yang luar biasa.

Saya tahu itu bukan kode yang brilian, tetapi untuk apa nilainya, ini dia. Seseorang mungkin menganggapnya berguna:

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

Ini benar-benar hanya sebuah komentar pada Jason Bunting "Use Crockford's JSON.stringify", tetapi saya tidak dapat menambahkan komentar pada jawaban itu.

Seperti disebutkan dalam komentar, JSON.stringify tidak cocok dengan pustaka Prototipe (www.prototypejs.org). Namun, cukup mudah untuk membuat mereka bermain bersama dengan baik untuk sementara waktu menghapus metode Array.prototype.toJSON yang ditambahkan prototipe, jalankan Crockford's strify (), lalu kembalikan seperti ini:

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

Saya pikir respons J. Buntings tentang penggunaan JSON.stringify juga bagus. Selain itu, Anda dapat menggunakan JSON.stringify melalui YUI objek JSON jika Anda menggunakan YUI. Dalam kasus saya, saya perlu membuang ke HTML sehingga lebih mudah untuk hanya men-tweak / memotong / menempel respon PhiLho.

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

Banyak orang menulis kode di utas ini, dengan banyak komentar tentang berbagai gotcha. Saya menyukai solusi ini karena sepertinya lengkap dan merupakan file tunggal tanpa ketergantungan.

browser

simpuljs

Ini bekerja "di luar kotak" dan memiliki kedua versi node dan browser (mungkin hanya pembungkus yang berbeda tetapi saya tidak menggali untuk mengkonfirmasi).

Perpustakaan juga mendukung pencetakan XML, SQL dan CSS, tapi saya belum mencoba fitur-fitur itu.

Yang sederhana untuk mencetak elemen sebagai string:

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

Perpustakaan NeatJSON saya memiliki versi Ruby dan JavaScript . Ini tersedia secara bebas di bawah Lisensi MIT (permisif). Anda dapat melihat demo / konverter online di:
http://phrogz.net/JS/neatjson/neatjson.html

Beberapa fitur (semua opsional):

• Bungkus dengan lebar tertentu; jika suatu objek atau array dapat ditampung di baris, itu disimpan pada satu baris.
• Sejajarkan titik dua untuk semua kunci dalam suatu objek.
• Sortir kunci ke objek berdasarkan abjad.
• Memformat angka floating point ke jumlah desimal tertentu.
• Saat membungkus, gunakan versi 'pendek' yang menempatkan tanda kurung buka / tutup untuk array dan objek pada baris yang sama dengan nilai pertama / terakhir.
• Kontrol spasi putih untuk array dan objek secara granular (kurung di dalam, sebelum / sesudah titik dua dan koma).
• Bekerja di browser web dan sebagai modul Node.js.

flexjson menyertakan fungsi prettyPrint () yang mungkin memberi Anda apa yang Anda inginkan.