Formattazione dati JavaScript / stampante carina

Sto cercando di trovare un modo per pretty printuna struttura di dati JavaScript in un formato leggibile dall'uomo per il debug.

Ho una struttura di dati piuttosto grande e complicata che viene archiviata in JS e ho bisogno di scrivere del codice per manipolarlo. Per capire cosa sto facendo e dove sto sbagliando, ciò di cui ho davvero bisogno è poter vedere la struttura dei dati nella sua interezza e aggiornarla ogni volta che apporto modifiche attraverso l'interfaccia utente.

Tutto ciò che posso gestire da solo, oltre a trovare un modo carino per scaricare una struttura di dati JavaScript su una stringa leggibile dall'uomo. JSON lo farebbe, ma ha davvero bisogno di essere ben formattato e rientrato. Di solito userei l'eccellente materiale di dumping DOM di Firebug per questo, ma ho davvero bisogno di essere in grado di vedere l'intera struttura in una volta, il che non sembra essere possibile in Firebug.

Eventuali suggerimenti sono ben accetti

Grazie in anticipo.

Ho scritto una funzione per scaricare un oggetto JS in una forma leggibile, anche se l'output non è rientrato, ma non dovrebbe essere troppo difficile aggiungerlo: ho creato questa funzione da una che ho creato per Lua (che è molto più complessa ) che ha gestito questo problema di rientro.

Ecco la versione "semplice":

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

Proverò a migliorarlo un po '.
Nota 1: per usarlo, fare od = DumpObject(something)e usare od.dump. Contorto perché volevo anche il valore len (numero di elementi) per un altro scopo. È banale fare in modo che la funzione restituisca solo la stringa.
Nota 2: non gestisce i loop nei riferimenti.

MODIFICARE

Ho realizzato la versione rientrata.

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

Scegli il rientro sulla linea con la chiamata ricorsiva e rinforza lo stile cambiando la linea commentata dopo questa.

... Vedo che hai montato la tua versione, il che è buono. I visitatori avranno una scelta.

Usa JSON.stringify di Crockford in questo modo:

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

La variabile textsarebbe simile a questa:

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

A proposito, questo non richiede altro che quel file JS: funzionerà con qualsiasi libreria, ecc.

È possibile utilizzare quanto segue

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

In Firebug, se solo console.debug ("%o", my_object)puoi fare clic su di esso nella console ed entrare in un esploratore di oggetti interattivo. Mostra l'intero oggetto e consente di espandere gli oggetti nidificati.

Per Node.js, utilizzare:

util.inspect(object, [options]);

Documentazione API

Per coloro che cercano un modo fantastico per vedere il tuo oggetto, controlla prettyPrint.js

Crea una tabella con opzioni di visualizzazione configurabili da stampare da qualche parte nel tuo documento. Meglio guardare che nel console.

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

Sto programmando Rhinoe non ero soddisfatto delle risposte pubblicate qui. Quindi ho scritto la mia bella stampante:

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

L'output è simile al seguente:

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

L'ho anche pubblicato come Gist qui per qualsiasi modifica futura possa essere richiesta.

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

diventa

[
   [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 (Framework di unit test usato da jQuery) usando la versione leggermente patchata di jsDump.

JSON.stringify () non è la scelta migliore in alcuni casi.

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

Prendendo la guida di PhiLho (grazie mille :)), ho finito per scrivere il mio perché non riuscivo proprio a fargli fare quello che volevo. È piuttosto grezzo e pronto, ma fa il lavoro di cui ho bisogno. Grazie a tutti per gli ottimi suggerimenti.

Non è un codice brillante, lo so, ma per quello che vale, eccolo qui. Qualcuno potrebbe trovarlo utile:

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

Questo è davvero solo un commento su "Usa Crockford's JSON.stringify" di Jason Bunting, ma non sono stato in grado di aggiungere un commento a quella risposta.

Come notato nei commenti, JSON.stringify non gioca bene con la libreria Prototype (www.prototypejs.org). Tuttavia, è abbastanza facile farli giocare bene insieme rimuovendo temporaneamente il metodo Array.prototype.toJSON che il prototipo aggiunge, esegui stringify di Crockford (), quindi rimettilo in questo modo:

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

Ho pensato che anche la risposta di J. Buntings sull'uso di JSON.stringify fosse buona. A parte, puoi usare JSON.stringify tramite l'oggetto JSON di YUIs se ti capita di usare YUI. Nel mio caso avevo bisogno di scaricare in HTML, quindi era più semplice modificare / tagliare / incollare la risposta 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;
}

Molte persone scrivono codice in questo thread, con molti commenti su vari gotcha. Mi è piaciuta questa soluzione perché sembrava completa ed era un singolo file senza dipendenze.

del browser

nodejs

Ha funzionato "out of the box" e ha entrambe le versioni del nodo e del browser (presumibilmente solo wrapper diversi ma non ho scavato per confermare).

La libreria supporta anche piuttosto la stampa di XML, SQL e CSS, ma non ho provato quelle funzionalità.

Un semplice per stampare gli elementi come stringhe:

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

La mia libreria NeatJSON ha entrambe le versioni Ruby e JavaScript . È liberamente disponibile con una Licenza MIT (permissiva). È possibile visualizzare una demo / convertitore online su:
http://phrogz.net/JS/neatjson/neatjson.html

Alcune funzionalità (tutte opzionali):

• Avvolgere ad una larghezza specifica; se un oggetto o un array può adattarsi alla linea, viene mantenuto su una linea.
• Allinea i due punti per tutte le chiavi di un oggetto.
• Ordina le chiavi di un oggetto in ordine alfabetico.
• Formattare i numeri in virgola mobile su un numero specifico di decimali.
• Quando si esegue il wrapping, utilizzare una versione 'corta' che mette le parentesi aperte / chiuse per matrici e oggetti sulla stessa riga del primo / ultimo valore.
• Controlla lo spazio bianco per matrici e oggetti in modo granulare (parentesi interne, due punti prima / dopo e virgole).
• Funziona nel browser Web e come modulo Node.js.

flexjson include una funzione prettyPrint () che potrebbe darti quello che vuoi.