TS: JavaScript- bzw. JSON-Objekt anzeigen lassen

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.

--
Es gibt nichts Gutes, außer man tut es
Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
  1. @@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 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  2. 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.

    1. 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.

      --
      Es gibt nichts Gutes, außer man tut es
      Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
      1. 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?

      2. @@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 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. 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.

          --
          Es gibt nichts Gutes, außer man tut es
          Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
          1. 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

            --
            Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
            # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
            1. 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

              --
              Rosen sind rot.
              1. 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

                --
                Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
                1. Hallo Camping_RIDER,

                  Eine Seite kann mit JavaScript ja nur ihren eigenen LocalStorage auslesen.

                  Eine Seite ja, ein AddOn nicht.

                  Bis demnächst
                  Matthias

                  --
                  Rosen sind rot.
                  1. 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

                    --
                    Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                    # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
    2. Hello,

      Eher so?

      element.innerText = JSON.stringify(irgendwas);
      

      BTW: heißt das jetzt nicht "element.textContent"?

      Liebe Grüße
      Tom S.

      --
      Es gibt nichts Gutes, außer man tut es
      Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
      1. 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.

        1. 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.

          --
          Es gibt nichts Gutes, außer man tut es
          Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
          1. 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

            --
            Rosen sind rot.
            1. 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 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?

              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.

              --
              Es gibt nichts Gutes, außer man tut es
              Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
              1. 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

                --
                Rosen sind rot.
                1. 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.

                  1. 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

                    --
                    Rosen sind rot.
                    1. 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.

                      1. 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.

                        --
                        Es gibt nichts Gutes, außer man tut es
                        Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
                        1. Hello,

                          ... oder darf man try/catch in einem Eventhandler nicht benutzen?

                          Liebe Grüße
                          Tom S.

                          --
                          Es gibt nichts Gutes, außer man tut es
                          Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
                          1. 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.

                            1. 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.

                              --
                              Es gibt nichts Gutes, außer man tut es
                              Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
                              1. 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.

                                1. 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.

                                  --
                                  Es gibt nichts Gutes, außer man tut es
                                  Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
                  2. 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.

                    --
                    Es gibt nichts Gutes, außer man tut es
                    Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
                    1. 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.

  3. 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.