JavaScript Datenformatierung / ziemlich Drucker
https://stackoverflow.com/questions/130404
-
02-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich versuche, einen Weg zu finden, eine JavaScript-Datenstruktur in einer für Menschen lesbarer Form für das Debuggen pretty print.
Ich habe eine ziemlich große und komplizierte Datenstruktur in JS gespeichert werden und ich brauche einen Code zu schreiben, es zu manipulieren. Um herauszufinden, was ich tue und wohin ich gehe falsch, was ich wirklich brauchen, um in der Lage ist, die Datenstruktur in ihrer Gesamtheit zu sehen, und es zu aktualisieren, wenn ich Änderungen über die Benutzeroberfläche zu machen.
All diese Sachen, die ich mich selbst handhaben kann, abgesehen eine schöne Art und Weise von der Suche nach einer JavaScript-Datenstruktur in eine menschenlesbare Zeichenfolge auszugeben. JSON tun würde, aber es muss wirklich schön formatiert und vertieft werden. Ich würde in der Regel Firebug ausgezeichnete DOM Dumping Sachen für diese, aber ich muss wirklich in der Lage sein, die gesamte Struktur auf einmal, um zu sehen, was nicht in Firebug möglich zu sein scheint.
Alle Vorschläge sind willkommen.
Vielen Dank im Voraus.
Lösung
schrieb ich eine Funktion ein JS-Objekt in einer lesbaren Form zu entleeren, obwohl der Ausgang nicht eingerückt ist, aber es sollte nicht allzu schwer sein, dass hinzufügen: Ich habe diese Funktion aus, die ich für Lua gemacht (was viel komplexer), die diese Vertiefung Ausgabe behandelt.
Hier ist die "einfache" Version:
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;
}
Ich werde sehen es ein wenig zu verbessern.
Anmerkung 1: es zu verwenden, machen od = DumpObject(something) und verwenden od.dump. Verworren, weil ich den LEN-Wert zu (Stückzahl) für einen anderen Zweck wollten. Es ist trivial, die Funktion Rückkehr nur die Zeichenfolge zu machen.
Anmerkung 2:. Es nicht verarbeitet Schleifen in Referenzen
Bearbeiten
Ich habe die gegliederte Version.
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$/, "");
}
Wählen Sie Ihre Einbuchtung auf der Linie mit dem rekursiven Aufruf, und Sie Artklammer durch die Kommentarzeile nach dieser Schalt.
... Ich sehe Sie Ihre eigene Version aufgepeitscht, was gut ist. Die Besucher haben die Wahl.
Andere Tipps
Verwenden Sie Crockford JSON.stringify wie folgt aus:
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...
Variable text würde wie folgt aussehen:
[
"e",
{
"pluribus": "unum"
}
]
Übrigens erfordert dies nichts anderes, als dass JS-Datei -. Es wird mit jeder Bibliothek arbeiten, etc
Sie können die folgenden Befehle verwenden
<pre id="dump"></pre>
<script>
var dump = JSON.stringify(sampleJsonObject, null, 4);
$('#dump').html(dump)
</script>
In Firebug, wenn Sie nur console.debug ("%o", my_object) Sie es in der Konsole klicken und geben Sie ein interaktives Objekt-Explorer. Es zeigt das gesamte Objekt, und können Sie verschachtelte Objekte erweitern.
Für die Suche nach einem tollen Weg, um Ihr Objekt zu sehen, zu überprüfen prettyPrint.js
Erstellt eine Tabelle mit konfigurierbaren Ansichtsoptionen gedruckt auf Ihrem doc irgendwo werden. Besser aussieht als in den console.
var tbl = prettyPrint( myObject, { /* options such as maxDepth, etc. */ });
document.body.appendChild(tbl);
Ich bin Programmierung in Rhino und ich war mit einer der Antworten nicht zufrieden, die hier gepostet wurde. Also habe ich meinen eigenen hübschen Drucker geschrieben:
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)
}
Die Ausgabe sieht wie folgt aus:
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: []
}
}
Ich habe geschrieben es auch als Gist hier für was auch immer zukünftige Änderungen erforderlich sein.
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')
])wird
[
[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 (Einheit-Test-Framework, die von jQuery) leicht gepatchte Version von jsDump verwendet wird.
JSON.stringify () ist nicht die beste Wahl auf einigen Fällen.
JSON.stringify({f:function(){}}) // "{}"
JSON.stringify(document.body) // TypeError: Converting circular structure to JSON
Unter PhiLho Führung (vielen Dank :)), beenden ich meine eigenen bis zu schreiben, da ich nicht ganz konnte seine erhalten zu tun, was ich wollte. Es ist ziemlich rau und fertig, aber es macht den Job, den ich brauche. Vielen Dank für die ausgezeichneten Vorschläge.
Es ist nicht brillant Code, ich weiß, aber für das, was es wert ist, hier ist es. Jemand könnte es nützlich sein:
// 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
}
Das ist wirklich nur ein Kommentar zu Jason Buntings „Use Crockford JSON.stringify“, aber ich war zu dieser Antwort einen Kommentar hinzufügen nicht in der Lage.
Wie in den Kommentaren erwähnt, JSON.stringify spielt nicht gut mit der Prototype (www.prototypejs.org) Bibliothek. Allerdings ist es ziemlich einfach ist, sie gut zusammen zu machen spielen, indem sie vorübergehend die Array.prototype.toJSON Methode zu entfernen, die Prototypen laufen Crockford stringify () fügt, dann legte es so zurück:
var temp = Array.prototype.toJSON;
delete Array.prototype.toJSON;
$('result').value += JSON.stringify(profile_base, null, 2);
Array.prototype.toJSON = temp;
Ich dachte, J. Ammern Antwort auf mit JSON.stringify auch gut war. Ein Nebenbei bemerkt, können Sie JSON.stringify über YUIs JSON-Objekt verwenden, wenn Sie mit YUI passieren werden. In meinem Fall musste ich HTML-Dump so war es einfacher, nur zwicken / Cut / Paste PhiLho Antwort.
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;
}
Viele Menschen in diesem Thread, mit vielen Kommentaren über verschiedene gotchas das Schreiben von Code. Mir gefiel diese Lösung, weil es schien, vollständig und war eine einzelne Datei ohne Abhängigkeiten.
Es funktionierte „out of the box“ und hat beide Knoten und Browser-Versionen (vermutlich nur verschiedene Wrapper aber ich graben nicht bestätigen).
Die Bibliothek unterstützt auch ziemlich Druck XML, SQL und CSS, aber ich habe diese Funktionen nicht versucht.
Ein einfacher zum Drucken der Elemente als Strings:
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);
Meine NeatJSON Bibliothek hat sowohl Ruby und JavaScript-Versionen . Es ist frei verfügbar unter (permissiven) MIT-Lizenz.
: Sie können eine Online-Demo / Konverter sehen
http://phrogz.net/JS/neatjson/neatjson.html
Einige Funktionen (alle optional):
- Wickeln auf eine bestimmte Breite; wenn ein Objekt oder ein Array auf der Linie passen, sie auf einer Linie gehalten wird.
- Richten Sie die Doppelpunkte für alle Schlüssel in einem Objekt.
- sortiert die Schlüssel zu einem Objekt in alphabetischer Reihenfolge.
- Format Gleitkommazahlen auf eine bestimmte Anzahl von Dezimalstellen.
- Beim Einwickeln, verwenden Sie eine ‚kurze‘ Version, die die Öffnungs- / Schließwinkel für Arrays und Objekte auf der gleichen Linie wie die erste / letzte Wert legt.
- Steuern Sie die Leerzeichen für Arrays und Objekte in einer körnigen Weise (in Klammern, vor / nach Doppelpunkten und Komma).
- Werke im Web-Browser und als Node.js Modul.
flexjson enthält eine Schön () Funktion das könnten Sie, was Sie wollen.
