Zeichnen Sie ein verschachteltes Objekt wie in der Chrome-Konsole mit js in HTML ⇐ HTML

[Anonymous]

Ich habe mehrere JS-Objekte, die etwa so aussehen:

Code: Select all

const ih_t = {
header : 0,
body: Array.from({ length: 18 }, () => ({
val: 0
}))
};

Ich möchte sie auf einer HTML-Seite auf die gleiche Weise anzeigen, wie Google Chrome Objekte in seiner Konsole anzeigt. Ich denke, viele Leute haben diese Ausstellung gesehen; es sieht so aus:

Lassen Sie mich gleich sagen, dass ich diese Funktionen und das Wort „Prototyp“ nicht brauche. (Meine Objekte enthalten keine Funktionen.) Ich möchte nur das anzeigen, was ich in das Objekt eingebunden habe. Und zeichnen Sie es in Form eines schönen HTML-Baums in reinem JS ohne jegliche Bibliotheken (wie in Chrome-Entwicklungstools)
Es wäre ideal, Feldnamen zu unterstützen. Die obige Struktur könnte beispielsweise wie folgt lauten:

Code: Select all

oberste Ebene enthält ih_t und hat zwei untergeordnete -Header und -Body

Header enthält „Header“ und Wert, bode enthält „body“ und Array

für jedes Array-Mitglied haben wir ein separates untergeordnetes
Ist das möglich?
Für Trinagle können wir SVG mit verwenden Pfad:

Code: Select all