JavaScript- bzw. JSON-Objekt anzeigen lassen
TS
- javascript
1 Mitleser0 Gunnar Bittersmann0 dedlfix0 TS0 TS0 dedlfix0 TS0 Matthias Apsel0 TS
0 pl
Hello,
ich komme nicht mehr drauf, wie die Methode/Funktion hieß, mit der ich mir ein JSON-Objekt anzeigen lassen kann, so wie es z. B. PHP print_r() tut.
element.innerHTML = method-X(JSON.stringify(~OBJECT~));
da war doch mal was mit "compute()" oder so ähnlich, aber ich finde keinen Querverweis mehr :-(
Liebe Grüße
Tom S.
@@TS
ich komme nicht mehr drauf, wie die Methode/Funktion hieß, mit der ich mir ein JSON-Objekt anzeigen lassen kann, so wie es z. B. PHP print_r() tut.
console.log()
LLAP 🖖
Tach!
ich komme nicht mehr drauf, wie die Methode/Funktion hieß, mit der ich mir ein JSON-Objekt anzeigen lassen kann, so wie es z. B. PHP print_r() tut.
Definiere JSON-Objekt. Ich kenne nur Javascript-Objekte und JSON.stringify(), um Daten gemäß JSON in eine serialisierte Form innerhalb eines Strings zu bringen. Alles kann man sich mit console.log() anzeigen lassen.
element.innerHTML = method-X(JSON.stringify(~OBJECT~));
Eher so?
element.innerText = JSON.stringify(irgendwas);
Wenn du JSON in eine HTML-Baumstruktur bringen möchtest, brauchst du Code, der das tut, ist aber meines Wissens nicht nur ein simpler Funktionsaufruf einer im Browser vorhandenen Geschichte. JSON-Viewer mit mehr oder weniger Komfort (ausklappbare Knoten zum Beispiel) gibts aber auch fertig.
dedlfix.
Hello,
ich komme nicht mehr drauf, wie die Methode/Funktion hieß, mit der ich mir ein JSON-Objekt anzeigen lassen kann, so wie es z. B. PHP print_r() tut.
Definiere JSON-Objekt. Ich kenne nur Javascript-Objekte und JSON.stringify(), um Daten gemäß JSON in eine serialisierte Form innerhalb eines Strings zu bringen. Alles kann man sich mit console.log() anzeigen lassen.
element.innerHTML = method-X(JSON.stringify(~OBJECT~));
Eher so?
element.innerText = JSON.stringify(irgendwas);
Das macht nicht den Unterschied, wäre aber besser. Stimmt.
Ich suche die "method-X()". Kann natürlich sein, dass die aus jQuery kommt. Muss ich dort nochmal suchen. Ich habs mir dummerweise nicht gleich notiert.
Und für die beiden anderen Antworten: herzlichen Dank, aber console.x() wollte ich nicht, sonst hätte ich das geschrieben. Es soll im Dokument angezeigt werden.
Liebe Grüße
Tom S.
Und für die beiden anderen Antworten: herzlichen Dank, aber console.x() wollte ich nicht, sonst hätte ich das geschrieben. Es soll im Dokument angezeigt werden.
Aus Interesse: warum? Use case?
@@TS
Und für die beiden anderen Antworten: herzlichen Dank, aber console.x() wollte ich nicht, sonst hätte ich das geschrieben. Es soll im Dokument angezeigt werden.
Dass Debug-Ausgaben im Dokument angezeigt werden sollen anstatt im Entwicklungswerkzeug, ist wohl eher die Ausnahme denn die Regel. Du hättest das also explizit erwähnen müssen.
Darf man fragen, warum bei dir Debug-Ausgaben im Dokument angezeigt werden sollen anstatt im Entwicklungswerkzeug?
LLAP 🖖
Hello,
... weil es Aufgabe des Dokumentes (bzw. des JS-Moduls) ist, den Local Storage für normale Menschen lesbar sichtbar zu machen, ohne erst lange Erklärungen über das Debugging abgeben zu müssen.
Und wo ich die Ausgabe wünsche, habe ich angegeben. Man muss nur lesen!
Liebe Grüße
Tom S.
Aloha ;)
... weil es Aufgabe des Dokumentes (bzw. des JS-Moduls) ist, den Local Storage für normale Menschen lesbar sichtbar zu machen, ohne erst lange Erklärungen über das Debugging abgeben zu müssen.
Und wer soll dieses Modul dann am Ende warum benutzen wollen?
Oder, wenn es eine akademische Fragestellung sein sollte - was bezweckst du dabei zu lernen oder damit zu lehren?
Grüße,
RIDER
Hallo Camping_RIDER,
Und wer soll dieses Modul dann am Ende warum benutzen wollen?
Die Frage habe ich mir auch gestellt. Ich könnte mir ein AddOn vorstellen, dass den Inhalt aller WebStorages für den interessierten Benutzer anzeigt, ähnlich wie das heute ohne AddOns für die Cookies möglich ist.
Bis demnächst
Matthias
Aloha ;)
Und wer soll dieses Modul dann am Ende warum benutzen wollen?
Die Frage habe ich mir auch gestellt. Ich könnte mir ein AddOn vorstellen, dass den Inhalt aller WebStorages für den interessierten Benutzer anzeigt, ähnlich wie das heute ohne AddOns für die Cookies möglich ist.
Naja, das sollte meiner Meinung nach eben nicht möglich sein. Eine Seite kann mit JavaScript ja nur ihren eigenen LocalStorage auslesen. Deshalb ja meine Frage. Mir mag einfach keine sinnvolle Anwendung einfallen, denn egal wie kann ich ja immer nur die Daten auslesen, die ich selbst da hinein geschrieben habe!
Grüße,
RIDER
Hallo Camping_RIDER,
Eine Seite kann mit JavaScript ja nur ihren eigenen LocalStorage auslesen.
Eine Seite ja, ein AddOn nicht.
Bis demnächst
Matthias
Aloha ;)
Eine Seite kann mit JavaScript ja nur ihren eigenen LocalStorage auslesen.
Eine Seite ja, ein AddOn nicht.
Au ja, stimmt. Ich vergesse Tampermonkey und Consorten immer. Ja, okay, das wäre ein möglicher Usecase.
Grüße,
RIDER
Hello,
Eher so?
element.innerText = JSON.stringify(irgendwas);
BTW: heißt das jetzt nicht "element.textContent"?
Liebe Grüße
Tom S.
Tach!
element.innerText = JSON.stringify(irgendwas);
BTW: heißt das jetzt nicht "element.textContent"?
Kann sein, für mich heißt das eher <element>{{irgendwas|json}}</element>
. Warum in den Niederungen der direkten DOM-Manipulation rumkreuchen, wenn man seine Webapplikationen auch mit Angular schreiben kann?
dedlfix.
Hello,
BTW: heißt das jetzt nicht "element.textContent"?
Kann sein, für mich heißt das eher
<element>{{irgendwas|json}}</element>
. Warum in den Niederungen der direkten DOM-Manipulation rumkreuchen, wenn man seine Webapplikationen auch mit Angular schreiben kann?
Ok, das ist ein Argument. :-)
Ist mir heute gerade wieder untergekommen in den Werbemails, aber bisher kann ich nichts damit anfangen. Ich lebe noch mit native JS und jQuery.
Jetzt habe ich dutzende von Webseiten durch, aber es will mir nicht mehr einfallen, auf welcher ich diese nette Funktion/Methode hatte, die den Storage so schön aufbereitet dargestellt hat.
Wenn ich jetzt selber eine schreibe, finde ich die andere vermutlich genau dann wieder, wenn meine einigermaßen rund läuft... :-(
Liebe Grüße
Tom S.
Hallo TS,
Jetzt habe ich dutzende von Webseiten durch, aber es will mir nicht mehr einfallen, auf welcher ich diese nette Funktion/Methode hatte, die den Storage so schön aufbereitet dargestellt hat.
localStorage.length
liefert dir die Anzahl der Schlüssel-/Wertpaare, localStorage.key(n)
den Namen des n. Schlüssels und localStorage.getItem(localStorage.key(n))
den dazugehörenden Wert.
Und das lässt sich doch schön als Liste einfügen, oder verstehe ich dich falsch?
Bis demnächst
Matthias
Hello,
Jetzt habe ich dutzende von Webseiten durch, aber es will mir nicht mehr einfallen, auf welcher ich diese nette Funktion/Methode hatte, die den Storage so schön aufbereitet dargestellt hat.
localStorage.length
liefert dir die Anzahl der Schlüssel-/Wertpaare,localStorage.key(n)
den Namen des n. Schlüssels undlocalStorage.getItem(localStorage.key(n))
den dazugehörenden Wert.Und das lässt sich doch schön als Liste einfügen, oder verstehe ich dich falsch?
Das habe ich schon. Das wäre ja einfach.
Aber im LocalStorage können auch auch Objekte stehen und Methoden (was hier nahezu das Gleiche wäre). Ich muss es also rekursiv darstellen.
die einfache Lösung dafür habe ich ja schon lange:
function print_r(obj)
{
var output = '';
if(Array.isArray(obj) || typeof(obj) == 'object')
{
for(var i in obj)
{
output += i + ': ' + print_r(obj[i]) + '\n';
}
}
else
{
output += obj;
}
return output;
}
Nur die schönen TAB-Einrückungen muss ich noch einbauen.
Liebe Grüße
Tom S.
Hallo TS,
Aber im LocalStorage können auch auch Objekte stehen und Methoden (was hier nahezu das Gleiche wäre).
Hast du dafür Beispiele?
Bis demnächst
Matthias
Tach!
Aber im LocalStorage können auch auch Objekte stehen und Methoden (was hier nahezu das Gleiche wäre).
Hast du dafür Beispiele?
JSONalisierte Objekte. Es ist ja nur ein einfacher Key-Value-Speicher und JSON ist die einfachste Art, komplexe Dinge abzulegen.
dedlfix.
Hallo dedlfix,
JSONalisierte Objekte. Es ist ja nur ein einfacher Key-Value-Speicher und JSON ist die einfachste Art, komplexe Dinge abzulegen.
Also muss man vorher wissen, was in der Zeichenwurst (val) drinsteckt. Denn nicht alles, was mit einer geschweiften Klammer beginnt, muss ein JSON-String sein.
Bis demnächst
Matthias
Tach!
Also muss man vorher wissen, was in der Zeichenwurst (val) drinsteckt. Denn nicht alles, was mit einer geschweiften Klammer beginnt, muss ein JSON-String sein.
try {
zeugs = JSON.parse(localstorage_inhalt);
} catch {
zeugs = localstorage_inhalt;
}
Man geht da optimistisch an das Auslesen ran und hat einen Fallback parat.
dedlfix.
Hello,
Also muss man vorher wissen, was in der Zeichenwurst (val) drinsteckt. Denn nicht alles, was mit einer geschweiften Klammer beginnt, muss ein JSON-String sein.
try { zeugs = JSON.parse(localstorage_inhalt); } catch { zeugs = localstorage_inhalt; }
Man geht da optimistisch an das Auslesen ran und hat einen Fallback parat.
Prinzipiell eine gute Idee.
Klappt aber irgendwie nicht. Ich bekomme immer die Fehlermeldung, dass vor dem catch noch eine runde Klammer fehlen würde. Ich habe es dreißigmal kontrolliert, es war alles da und auch nichts zuviel, die Seite wurde garantiert neu geladen (Kontrollausgaben).
Jetzt habe ich keine Lust mehr. :-((
Liebe Grüße
Tom S.
Hello,
... oder darf man try/catch in einem Eventhandler nicht benutzen?
Liebe Grüße
Tom S.
Tach!
... oder darf man try/catch in einem Eventhandler nicht benutzen?
Eine solche Einschränkung wäre unsinnig. Im Browser läuft ja quasi alles in irgendeinem Eventhandler.
Du wirst da einen Syntaxfehler haben. Mein Beispiel war auch nicht vollständig, das catch hätte gern eine Variable übergeben bekommen, in der es die Exception durchreichen kann.
dedlfix.
Hello,
so, das Einpacken und Auspacken von Objekten klappt jetzt soweit. Man muss sie mit JSON.stringify() und JSON.parse() behandeln. Das direkte Abspeichern von Objekten, auch unter Zuhilfenahme von Object.assign(), klappt leider nicht.
Eine wirklich nette Sache ist window.addEventListener('storage', function())
.
Die Kommunikation zwischen den Dokumenten wird dadurch extram einfach. Ob man da noch Window.postMessage() benötigt, kann ich noch nicht nachvollziehen, weil man ja auch dort die Fenster entsprechend vorbereiten müsste (authorisieren). Da kann man dann auch gleich den Eventlistener auf den Storage setzen, oder?
Eine wirklich spannende Geschichte sind sicherlich noch die SharedWorker. Still a lot ToDo...
Liebe Grüße
Tom S.
Tach!
so, das Einpacken und Auspacken von Objekten klappt jetzt soweit. Man muss sie mit JSON.stringify() und JSON.parse() behandeln. Das direkte Abspeichern von Objekten, auch unter Zuhilfenahme von Object.assign(), klappt leider nicht.
Works as designed and documented. keyValue ist als DOMString deklariert (was kompatibel zu String ist).
Eine wirklich nette Sache ist
window.addEventListener('storage', function())
. Die Kommunikation zwischen den Dokumenten wird dadurch extram einfach. Ob man da noch Window.postMessage() benötigt, kann ich noch nicht nachvollziehen,
Du wolltest doch was haben, das nebenläufigkeitssicher ist und nicht jeden Prozess unkontrolliert lesen und schreiben und tocttouen lassen.
dedlfix.
Hello,
Du wolltest doch was haben, das nebenläufigkeitssicher ist und nicht jeden Prozess unkontrolliert lesen und schreiben und tocttouen lassen.
Das schaue ich mir gleich an -> lockableStorage
Liebe Grüße
Tom S.
Hello,
JSONalisierte Objekte. Es ist ja nur ein einfacher Key-Value-Speicher und JSON ist die einfachste Art, komplexe Dinge abzulegen.
Schein zu stimmen. So bekomme ich nur [object Object] als Antwort oder
key: function key() {
[native code]
}
für die eigenen Methoden des Storage-Objektes.
Kann man das Storage-Obejekt selber vielleicht erweitern?
Das Beispiel, das ich hier zum Start der Überlegungen hatte, habe ich j leider noch nicht wiedergefunden.
Da muss ich also erstmal erkennen üben, wann ein JSON-"Objekt" vorliegt, also ob der Wert ein serialisiertes Objekt enthält.
Liebe Grüße
Tom S.
Tach!
Kann man das Storage-Obejekt selber vielleicht erweitern?
Würde ich nicht tun, denn du müsstest dann localStorage und sessionStorage überschreiben. Üblicher ist, einen Wrapper drumherumzulegen, der dann die gewünschte zusätzliche Funktionalität bietet. Es gibt da auch welche, die bei nicht vorhandener Storage API einen Ersatz bereitstellen. Aber das braucht man heutzutage eigentlich nicht mehr.
Da muss ich also erstmal erkennen üben, wann ein JSON-"Objekt" vorliegt, also ob der Wert ein serialisiertes Objekt enthält.
Wenn das Parsen keine Exception wirft ...
dedlfix.
Wer viel entwickelt, braucht auch den Dumper öfters. Aus diesem Grund hab ich das sowohl server- als auch clientseitig so vorbereitet, dass es nur eine Zeile Code braucht zum dumpen beliebiger Datenstrukturen, hier kannst Du Dir das angucken und testen. Für JS wird dazu ein <pre>-Bereich erzeugt und an den <body> gehängt.
Schönen Sonntag.