Wie kann ich ein JavaScript-Objekt angezeigt werden?
https://stackoverflow.com/questions/957537
-
12-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Wie zeige ich den Inhalt eines JavaScript-Objekts in einem String-Format wie wenn wir eine Variable alert?
Die gleiche Art und Weise formatiert Ich möchte ein Objekt angezeigt werden soll.
Lösung
Wenn Sie das Objekt für Debugging-Zwecke drucken möchten, verwenden Sie den Code ein:
var obj = {prop1: 'prop1Value', prop2: 'prop2Value', child: {childProp1: 'childProp1Value'}}
console.log(obj)
anzeigt:
Hinweis: Sie müssen nur log das Objekt. Zum Beispiel wird dies nicht funktionieren:
console.log('My object : ' + obj)
Andere Tipps
Mit nativen JSON.stringify Methode.
Arbeitet mit verschachtelten Objekten und allen gängigen Browsern Unterstützung dieser Methode.
str = JSON.stringify(obj);
str = JSON.stringify(obj, null, 4); // (Optional) beautiful indented output.
console.log(str); // Logs output to dev tools console.
alert(str); // Displays output using window.alert()
Link zur Mozilla API-Referenz und andere Beispiele.
obj = JSON.parse(str); // Reverses above operation (Just in case if needed.)
Verwenden Sie eine benutzerdefinierte JSON.stringify replacer , wenn Sie stoßen diese Javascript-Fehler
"Uncaught TypeError: Converting circular structure to JSON"
var output = '';
for (var property in object) {
output += property + ': ' + object[property]+'; ';
}
alert(output);
console.dir(object):
Zeigt eine interaktive Auflistung der Eigenschaften eines bestimmten JavaScript-Objekt. Diese Auflistung können Sie die Dreiecksymbole, um den Inhalt der untergeordneten Objekte zu untersuchen.
Beachten Sie, dass die console.dir() Funktion ist nicht-Standard. Siehe MDN Web Docs
versuchen Sie dies:
console.log(JSON.stringify(obj))
Dies wird die stringify Version des Objekts drucken. Anstatt also [object] als Ausgang werden Sie den Inhalt des Objekts erhalten.
Nun, Firefox (dank @Bojangles für weitere Informationen) hat Object.toSource() Methode, die Objekte als JSON und function(){} druckt.
Das reicht für die meisten Debug-Zwecke, schätze ich.
Wenn Sie Alarm verwenden möchten, Ihr Objekt zu drucken, können Sie dies tun:
alert("myObject is " + myObject.toSource());
Es sollte jede Eigenschaft und seinen entsprechenden Wert im String-Format drucken.
In NodeJS können Sie ein Objekt drucken, indem Sie util.inspect(obj) . Achten Sie darauf, um die Tiefe zu erklären, oder Sie werden nur einen flachen Druck des Objekts haben.
Wenn Sie möchten, dass Daten in tabellarischer Form sehen, die Sie verwenden können
console.table(obj);
kann Tabelle sortiert werden, wenn Sie auf der Tabellenspalte klicken.
Sie können auch auswählen, welche Spalten zeigen:
console.table(obj, ['firstName', 'lastName']);
Sie können mehr Informationen über console.table hier finden
Funktion:
var print = function(o){
var str='';
for(var p in o){
if(typeof o[p] == 'string'){
str+= p + ': ' + o[p]+'; </br>';
}else{
str+= p + ': { </br>' + print(o[p]) + '}';
}
}
return str;
}
Verwendung:
var myObject = {
name: 'Wilson Page',
contact: {
email: 'wilson@hotmail.com',
tel: '123456789'
}
}
$('body').append( print(myObject) );
Beispiel:
Wie es gesagt wurde vor am besten und am einfachsten Weg gefunden, ich war
var getPrintObject=function(object)
{
return JSON.stringify(object);
}
verwenden:
console.log('print object: ' + JSON.stringify(session));
Um das volle Objekt druckt mit Node.js mit Farben als Bonus:
console.dir(object, {depth: null, colors: true})
Die Farben sind natürlich optional, 'Tiefe: null'. Wird das vollständige Objekt drucken
Die Optionen scheinen nicht in Browsern unterstützt werden.
Referenzen:
https://developer.mozilla.org/en- US / docs / Web / API / Console / dir
https://nodejs.org/api/console.html#console_console_dir_obj_options
Wenn Sie das Objekt von seiner vollen Länge drucken möchten, können
console.log (require ( 'util') inspizieren (obj, {showhidden: false, Tiefe: null}).
Wenn Sie möchten, um das Objekt zu drucken, indem es auf den String Umwandlung dann
console.log (JSON.stringify (obj));
(Diese in meiner Bibliothek hinzugefügt wurde GitHub )
Das Rad neu erfinden hier! Keine dieser Lösungen gearbeitet für meine Situation. Also, ich frisiert schnell pagewil Antwort auf. Dies ist nicht für das Drucken auf Bildschirm (via Konsole oder Textfeld oder was auch immer). Es ist jedoch für den Datentransport. Diese Version scheint ein sehr ähnliches Ergebnis wie toSource() zurückzukehren. Ich habe nicht JSON.stringify versucht, aber ich nehme an, das über die gleiche Sache ist. Das Ergebnis dieser Funktion ist eine gültige Javascript Objektdeklaration.
Ich würde nicht daran zweifeln, wenn so etwas wie dies bereits auf SO irgendwo ist, aber es war nur kürzer zu machen, als einen bei der Suche nach Antworten zu verbringen. Und da diese Frage war mein Top-Hit auf Google, wenn ich über diese begann die Suche; Habe ich es hier setzen könnte, anderen helfen.
Wie auch immer, das Ergebnis aus dieser Funktion wird eine String-Darstellung des Objekts sein, auch wenn Ihr Objekt Objekte und Arrays eingebettet ist, und auch wenn diese Objekte oder Arrays haben noch weitere Objekte und Arrays eingebettet. (Ich habe gehört, Sie zu trinken? Also, ich kuppelte Ihr Auto mit einem Kühler. Und dann, ich kuppelte Ihren Kühler mit einem Kühler. So kann Ihr Kühler trinken, während kühl zu sein.)
Arrays werden mit [] gespeichert statt {} und somit nicht Schlüssel / Wert-Paare haben, nur Werte. Wie regelmäßige Anordnungen. Deshalb werden sie erstellt bekommen wie Arrays tun.
Auch alle String (einschließlich Schlüsselnamen) notiert wird, ist dies nicht notwendig, es sei denn diese Strings Sonderzeichen (wie ein Raum oder einen Schrägstrich). Aber ich habe nicht das Gefühl, wie diese Erkennung nur einige Zitate zu entfernen, die sonst noch gut funktionieren würde.
Das resultierende Zeichenfolge kann dann mit eval verwendet werden oder einfach nur in eine var durch String-Manipulation Dumping. So wieder neu zu erstellen, das Objekt, aus dem Text.
function ObjToSource(o){
if (!o) return 'null';
var k="",na=typeof(o.length)=="undefined"?1:0,str="";
for(var p in o){
if (na) k = "'"+p+ "':";
if (typeof o[p] == "string") str += k + "'" + o[p]+"',";
else if (typeof o[p] == "object") str += k + ObjToSource(o[p])+",";
else str += k + o[p] + ",";
}
if (na) return "{"+str.slice(0,-1)+"}";
else return "["+str.slice(0,-1)+"]";
}
Lassen Sie mich wissen, wenn ich das alles durcheinander, funktioniert in meinen Tests gut. Auch der einzige Weg, ich zu erkennen Typ array denken konnte, war für die Anwesenheit von length zu überprüfen. Da Javascript wirklich Arrays als Objekte speichert, kann ich nicht überprüfen tatsächlich für Typ array (es keine solche Art ist!). Wenn jemand anderes einen besseren Weg kennt, würde ich gerne hören. Denn wenn das Objekt eine Eigenschaft namens length hat, dann wird diese Funktion fälschlicherweise behandelt es als ein Array.
EDIT: Hinzugefügt Check für null bewertet Objekte. Dank Brock Adams
EDIT: Unten ist die feste Funktion der Lage sein, unendlich rekursive Objekte zu drucken. Dies druckt nicht die gleiche wie toSource von FF weil toSource die unendliche Rekursion einmal gedruckt werden, wo, wie, diese Funktion wird es sofort töten. Diese Funktion läuft langsamer als zuvor, so dass ich das Hinzufügen es hier statt der Bearbeitung der über Funktion, als nur erforderlich, wenn Sie planen, Objekte zu übergeben, zurück zu sich selbst verbinden, irgendwo.
const ObjToSource=(o)=> {
if (!o) return null;
let str="",na=0,k,p;
if (typeof(o) == "object") {
if (!ObjToSource.check) ObjToSource.check = new Array();
for (k=ObjToSource.check.length;na<k;na++) if (ObjToSource.check[na]==o) return '{}';
ObjToSource.check.push(o);
}
k="",na=typeof(o.length)=="undefined"?1:0;
for(p in o){
if (na) k = "'"+p+"':";
if (typeof o[p] == "string") str += k+"'"+o[p]+"',";
else if (typeof o[p] == "object") str += k+ObjToSource(o[p])+",";
else str += k+o[p]+",";
}
if (typeof(o) == "object") ObjToSource.check.pop();
if (na) return "{"+str.slice(0,-1)+"}";
else return "["+str.slice(0,-1)+"]";
}
Test:
var test1 = new Object();
test1.foo = 1;
test1.bar = 2;
var testobject = new Object();
testobject.run = 1;
testobject.fast = null;
testobject.loop = testobject;
testobject.dup = test1;
console.log(ObjToSource(testobject));
console.log(testobject.toSource());
Ergebnis:
{'run':1,'fast':null,'loop':{},'dup':{'foo':1,'bar':2}}
({run:1, fast:null, loop:{run:1, fast:null, loop:{}, dup:{foo:1, bar:2}}, dup:{foo:1, bar:2}})
Hinweis: document.body Versuch zu drucken ist ein schreckliches Beispiel. Zum einem FF druckt nur ein leeres Objekt Zeichenfolge, wenn toSource verwenden. Und wenn die Funktion oben mit, stürzt FF auf SecurityError: The operation is insecure.. Und Chrome wird auf Uncaught RangeError: Maximum call stack size exceeded abstürzen. Offensichtlich wurde document.body nicht zu String konvertiert werden soll. Weil seine entweder zu groß oder gegen Sicherheitsrichtlinien für den Zugriff auf bestimmte Eigenschaften. Es sei denn, ich etwas verkorkste hier, sagen!
brauchte ich eine Art und Weise rekursiv das Objekt zu drucken, die pagewil Antwort zur Verfügung gestellt (Danke!). Ich kann es ein wenig aktualisiert, einen Weg umfassen bis zu einem bestimmten Niveau zu drucken, und den Abstand hinzufügen, so dass es ordnungsgemäß auf dem aktuellen Niveau auf Basis Einbuchtungen, dass wir in so dass es besser lesbar ist.
// Recursive print of object
var print = function( o, maxLevel, level ) {
if ( typeof level == "undefined" ) {
level = 0;
}
if ( typeof level == "undefined" ) {
maxLevel = 0;
}
var str = '';
// Remove this if you don't want the pre tag, but make sure to remove
// the close pre tag on the bottom as well
if ( level == 0 ) {
str = '<pre>';
}
var levelStr = '';
for ( var x = 0; x < level; x++ ) {
levelStr += ' ';
}
if ( maxLevel != 0 && level >= maxLevel ) {
str += levelStr + '...</br>';
return str;
}
for ( var p in o ) {
if ( typeof o[p] == 'string' ) {
str += levelStr +
p + ': ' + o[p] + ' </br>';
} else {
str += levelStr +
p + ': { </br>' + print( o[p], maxLevel, level + 1 ) + levelStr + '}</br>';
}
}
// Remove this if you don't want the pre tag, but make sure to remove
// the open pre tag on the top as well
if ( level == 0 ) {
str += '</pre>';
}
return str;
};
Verbrauch:
var pagewilsObject = {
name: 'Wilson Page',
contact: {
email: 'wilson@hotmail.com',
tel: '123456789'
}
}
// Recursive of whole object
$('body').append( print(pagewilsObject) );
// Recursive of myObject up to 1 level, will only show name
// and that there is a contact object
$('body').append( print(pagewilsObject, 1) );
Verwenden Sie einfach
JSON.stringify(obj)
Beispiel
var args_string = JSON.stringify(obj);
console.log(args_string);
oder
alert(args_string);
Beachten Sie auch in JavaScript-Funktionen werden als Objekte betrachtet.
Eigentlich kann man zuweisen neue Eigenschaft wie folgt
foo.moo = "stackoverflow";
console.log(foo.moo);
NB: In diesen Beispielen definiert yourObj das Objekt, das Sie untersuchen möchten.
Zunächst einmal meine wenigsten noch am meisten genutzte Weg, um einen der Anzeige:
Dies ist die defacto Möglichkeit, den Inhalt eines Objekts zeigt
console.log(yourObj)
produzieren so etwas wie:
Ich denke, die beste Lösung durch die Objekte Schlüssel suchen ist, und dann durch die Objekte Werte, wenn Sie wirklich wollen, um zu sehen, was das Objekt hält ...
console.log(Object.keys(yourObj));
console.log(Object.values(yourObj));
Es wird Ausgang so etwas wie:
(Bild oben: die Schlüssel / Werte in dem Objekt gespeichert)
Es gibt auch diese neue Option, wenn Sie mit ECMAScript 2016 oder neuer:
Object.keys(yourObj).forEach(e => console.log(`key=${e} value=${yourObj[e]}`));
Dies wird ordentlich Ausgabe erzeugen:
Die Lösung in einer früheren Antwort erwähnt: console.log(yourObj) zeigt zu viele Parameter und ist nicht der benutzerfreundlichste Weg, um die Daten, die Sie angezeigt werden sollen. Deshalb habe ich die Protokollierung Tasten empfehlen und dann Werte getrennt.
Weiter oben:
console.table(yourObj)
Jemand in einem frühen Kommentar vorgeschlagen, diese ein, aber es nie für mich gearbeitet. Wenn es für jemanden funktioniert anders auf einem anderen Browser oder so etwas, dann ein dickes Lob! Ill setzen noch den Code hier als Referenz!
Ausgegeben, so etwas zu der Konsole:
Hier ist ein Weg, es zu tun:
console.log("%o", obj);
Der einfachste Weg:
console.log(obj);
oder mit einer Nachricht an:
console.log("object is: %O", obj);
Das erste Objekt, das Sie passieren können ein oder mehrere Formatbezeich. Eine Formatangabe besteht aus dem Prozentzeichen zusammengesetzt (%) gefolgt von einem Buchstaben, der die Formatierung angibt anzuwenden.
Ich verwende console.log("object will be: ", obj, obj1) immer.
So kann ich nicht brauchen, um die Problemumgehung mit stringify mit JSON zu tun.
Alle Eigenschaften des Objekts gut erweitert werden.
Eine weitere Möglichkeit, Objekte in der Konsole anzuzeigen ist mit JSON.stringify. Kasse der folgenden Beispiel:
var gandalf = {
"real name": "Gandalf",
"age (est)": 11000,
"race": "Maia",
"haveRetirementPlan": true,
"aliases": [
"Greyhame",
"Stormcrow",
"Mithrandir",
"Gandalf the Grey",
"Gandalf the White"
]
};
//to console log object, we cannot use console.log("Object gandalf: " + gandalf);
console.log("Object gandalf: ");
//this will show object gandalf ONLY in Google Chrome NOT in IE
console.log(gandalf);
//this will show object gandalf IN ALL BROWSERS!
console.log(JSON.stringify(gandalf));
//this will show object gandalf IN ALL BROWSERS! with beautiful indent
console.log(JSON.stringify(gandalf, null, 4));
var list = function(object) {
for(var key in object) {
console.log(key);
}
}
wo object ist Ihre Aufgabe
oder Sie können diese Werkzeuge in Chrom Entwickler verwenden, "Konsole" tab:
console.log(object);
Objekt obj = {0:'John', 1:'Foo', 2:'Bar'} Angenommen
Print-Objekts Inhalt
for (var i in obj){
console.log(obj[i], i);
}
Konsolenausgabe (Chrome DevTools):
John 0
Foo 1
Bar 2
Ich hoffe, das hilft!
JavaScript-Funktion
<script type="text/javascript">
function print_r(theObj){
if(theObj.constructor == Array || theObj.constructor == Object){
document.write("<ul>")
for(var p in theObj){
if(theObj[p].constructor == Array || theObj[p].constructor == Object){
document.write("<li>["+p+"] => "+typeof(theObj)+"</li>");
document.write("<ul>")
print_r(theObj[p]);
document.write("</ul>")
} else {
document.write("<li>["+p+"] => "+theObj[p]+"</li>");
}
}
document.write("</ul>")
}
}
</script>
Druck Object
<script type="text/javascript">
print_r(JAVACRIPT_ARRAY_OR_OBJECT);
</script>
Ein kleiner Helfer Funktion, die ich immer in meinen Projekten verwenden für die einfache, schnelle Fehlersuche über die Konsole. Inspiration genommen von Laravel.
/**
* @param variable mixed The var to log to the console
* @param varName string Optional, will appear as a label before the var
*/
function dd(variable, varName) {
var varNameOutput;
varName = varName || '';
varNameOutput = varName ? varName + ':' : '';
console.warn(varNameOutput, variable, ' (' + (typeof variable) + ')');
}
Verwendung
dd(123.55); Ausgänge:
var obj = {field1: 'xyz', field2: 2016};
dd(obj, 'My Cool Obj');
Ich ziehe mit console.table für klares Objektformat bekommen, so stellen Sie haben diese Aufgabe:
const obj = {name: 'Alireza', family: 'Dezfoolian', gender: 'male', netWorth: "$0"};
Und Sie werden Sie sehen, eine saubere und gut lesbare Tabelle wie folgt aus:
i verwendet pagewil das Druckverfahren, und es funktionierte sehr gut.
Hier ist meine leicht erweiterte Version mit (schlampig) Einzügen und verschiedenen prop / ob Trennzeichen:
var print = function(obj, delp, delo, ind){
delp = delp!=null ? delp : "\t"; // property delimeter
delo = delo!=null ? delo : "\n"; // object delimeter
ind = ind!=null ? ind : " "; // indent; ind+ind geometric addition not great for deep objects
var str='';
for(var prop in obj){
if(typeof obj[prop] == 'string' || typeof obj[prop] == 'number'){
var q = typeof obj[prop] == 'string' ? "" : ""; // make this "'" to quote strings
str += ind + prop + ': ' + q + obj[prop] + q + '; ' + delp;
}else{
str += ind + prop + ': {'+ delp + print(obj[prop],delp,delo,ind+ind) + ind + '}' + delo;
}
}
return str;
};
Eine weitere Modifikation von pagewils Code ... seine druckt nichts aus anderen als Strings und verlässt die Anzahl und die Boolesche Felder leer und Ich reparierte die Tippfehler auf der zweiten typeof nur innerhalb der Funktion, wie durch megaboss erstellt.
var print = function( o, maxLevel, level )
{
if ( typeof level == "undefined" )
{
level = 0;
}
if ( typeof maxlevel == "undefined" )
{
maxLevel = 0;
}
var str = '';
// Remove this if you don't want the pre tag, but make sure to remove
// the close pre tag on the bottom as well
if ( level == 0 )
{
str = '<pre>'; // can also be <pre>
}
var levelStr = '<br>';
for ( var x = 0; x < level; x++ )
{
levelStr += ' '; // all those spaces only work with <pre>
}
if ( maxLevel != 0 && level >= maxLevel )
{
str += levelStr + '...<br>';
return str;
}
for ( var p in o )
{
switch(typeof o[p])
{
case 'string':
case 'number': // .tostring() gets automatically applied
case 'boolean': // ditto
str += levelStr + p + ': ' + o[p] + ' <br>';
break;
case 'object': // this is where we become recursive
default:
str += levelStr + p + ': [ <br>' + print( o[p], maxLevel, level + 1 ) + levelStr + ']</br>';
break;
}
}
// Remove this if you don't want the pre tag, but make sure to remove
// the open pre tag on the top as well
if ( level == 0 )
{
str += '</pre>'; // also can be </pre>
}
return str;
};
Hier ist Funktion.
function printObj(obj) {
console.log((function traverse(tab, obj) {
let str = "";
if(typeof obj !== 'object') {
return obj + ',';
}
if(Array.isArray(obj)) {
return '[' + obj.map(o=>JSON.stringify(o)).join(',') + ']' + ',';
}
str = str + '{\n';
for(var p in obj) {
str = str + tab + ' ' + p + ' : ' + traverse(tab+' ', obj[p]) +'\n';
}
str = str.slice(0,-2) + str.slice(-1);
str = str + tab + '},';
return str;
}('',obj).slice(0,-1)))};
Es kann Objekt mit Registerkarte Einzug mit Lesbarkeit zeigen.
