Wie kann ich ein JavaScript-Objekt anzeigen?

Question

Wie zeige ich den Inhalt eines JavaScript-Objekts in einem String-Format an, wie wir es bei alert eine Variable?

Ich möchte ein Objekt auf die gleiche Weise formatieren.

Answer 1

Ich bevorzuge die Verwendung von console.table um ein klares Objektformat zu erhalten. Stellen Sie sich also vor, Sie haben dieses Objekt:

const obj = {name: 'Alireza', family: 'Dezfoolian', gender: 'male', netWorth: "$0"};

Sie erhalten dann eine übersichtliche und lesbare Tabelle wie die folgende:

Answer 2

Kreisförmige Referenzen Lösung

Anfertigen String ohne redundante Informationen aus Objekten, die doppelte Verweise (Verweise auf dasselbe Objekt an vielen Stellen) einschließlich zirkulärer Verweise enthalten, verwenden Sie JSON.stringify con Ersetzer (im Ausschnitt dargestellt) wie folgt

let s = JSON.stringify(obj, refReplacer(), 4);

function refReplacer() {
  let m = new Map(), v= new Map(), init = null;

  return function(field, value) {
    let p= m.get(this) + (Array.isArray(this) ? `[${field}]` : '.' + field); 
    let isComplex= value===Object(value)

    if (isComplex) m.set(value, p);  

    let pp = v.get(value)||'';
    let path = p.replace(/undefined\.\.?/,'');
    let val = pp ? `#REF:${pp[0]=='[' ? '$':'$.'}${pp}` : value;

    !init ? (init=value) : (val===init ? val="#REF:$" : 0);
    if(!pp && isComplex) v.set(value, path);

    return val;
  }
}

// ---------------
// TEST
// ---------------

// gen obj with duplicate references
let a = { a1: 1, a2: 2 };
let b = { b1: 3, b2: "4" };
let obj = { o1: { o2:  a  }, b, a }; // duplicate reference
a.a3 = [1,2,b];                      // circular reference
b.b3 = a;                            // circular reference

let s = JSON.stringify(obj, refReplacer(), 4);

console.log(s);
alert(s);

Diese Lösung basiert auf este (mehr Infos dort) erstellen JSONPath wie einen Pfad für jeden Objektwert, und wenn dasselbe Objekt zweimal (oder öfter) vorkommt, wird eine Referenz mit diesem Pfad verwendet, um auf dieses Objekt zu verweisen, z. B. #REF:$.bar.arr[3].foo (donde $ bedeutet Hauptobjekt) statt 'render' ganzes Objekt (was weniger redundant ist)

BONUS Inversion

function parseRefJSON(json) {
  let objToPath = new Map();
  let pathToObj = new Map();
  let o = JSON.parse(json);

  let traverse = (parent, field) => {
    let obj = parent;
    let path = '#REF:$';

    if (field !== undefined) {
      obj = parent[field];
      path = objToPath.get(parent) + (Array.isArray(parent) ? `[${field}]` : `${field?'.'+field:''}`);
    }

    objToPath.set(obj, path);
    pathToObj.set(path, obj);

    let ref = pathToObj.get(obj);
    if (ref) parent[field] = ref;

    for (let f in obj) if (obj === Object(obj)) traverse(obj, f);
  }

  traverse(o);
  return o;
}

// ------------
// TEST
// ------------

let s = `{
    "o1": {
        "o2": {
            "a1": 1,
            "a2": 2,
            "a3": [
                1,
                2,
                {
                    "b1": 3,
                    "b2": "4",
                    "b3": "#REF:$.o1.o2"
                }
            ]
        }
    },
    "b": "#REF:$.o1.o2.a3[2]",
    "a": "#REF:$.o1.o2"
}`;

console.log('Open Chrome console to see nested fields');
let obj = parseRefJSON(s);
console.log(obj);

Answer 3

Die Funktion console.log() eignet sich hervorragend zum Debuggen von Objekten, aber wenn Sie das Objekt in den Seiteninhalt ausgeben möchten, ist dies die einfachste Möglichkeit, die mir eingefallen ist, um die Funktionalität von PHPs print_r() nachzuahmen. Viele andere Antworten wollen das Rad neu erfinden, aber mit JSON.stringify() von JavaScript und dem <pre>-Tag von HTML erhalten Sie genau das, wonach Sie suchen.

var obj = { name: 'The Name', contact: { email: 'thename@gmail.com', tel: '123456789' }};
$('body').append('<pre>'+JSON.stringify(obj, null, 4)+'</pre>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 4

Wenn Sie auf der Suche nach einem Inliner für Node.js sind...

console.log("%o", object);

Answer 5

Eine kleine Hilfsfunktion, die ich in meinen Projekten immer für einfaches, schnelles Debugging über die Konsole verwende. Inspiration von Laravel übernommen.

/**
 * @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');