18

JSON in 5 Minuten: Was ist das? Einfach erklärt

Was du mit JSON machen kannst und was es mit einer TO-DO-Liste gemeinsam hat erfährst du hier.

Wofür brauchst Du JSON?

JSON (JavaScript Object Notation) ist eine Beschreibungssprache, das heißt man kann Informationen mit dieser Sprache speichern und von Computer zu Computer senden.

Stell dir folgendes vor: Du stehst morgens auf, gehst ins Bad und am Spiegel klebt ein Zettel.

Du erkennst sofort, dass es eine Liste mit Aufgaben für dich ist. Es ist eine TO-DO Liste für dich.

Das Format, Sonderzeichen und die Überschrift geben dir schnell zu verstehen, dass Du hier etwas zu tun hast.

Diese Liste beschreibt also was du zu erledigen hast und das scheint ja eine ganze Menge Zeug zu sein!

Was hat JSON damit zutun?

Sagen wir du hast es satt, dir täglich kleine Zettel zu schreiben. Du möchstest dir eine App bauen, in der du täglich deine TO-DO's sehen und abhaken kannst.

Die täglichen TO-DO's sollen dann gespeichert werden. Nehmen wir mal deine TO-DO-Liste und versuchen diese in ein Programm zu stecken.

Du kannst versuchen, diese einzuscannen, aber dann bist du die Zettel immer noch nicht los. Also wäre es einfacher die Informationen in einer Datei abzuspeichern.

Hier kannst du natürlich einfach eine Word-Datei nehmen, aber das würde die Programmierung unnötig komplex machen. Du müsstest erstmal verstehen, wie Word diese Dateien speichert und liest, damit du dieses Format in deiner App nutzen kannst.

Todo-Liste in einer Textdatei

Also nehmen wir lieber etwas einfacheres, eine simple Textdatei. Dort schreiben wir nun alle TO-DO's hinein.

Wenn deine App die Datei liest, werden diese angezeigt. Wenn du in der App ein Todo abhakst, dann wird diese Änderung wieder in die Datei gespeichert.

Auch hier gibt es leider noch einen Haken: Das Format deiner Textdatei hast du dir gerade ausgedacht! Das bedeutet, dass du die Funktionen programmieren musst, die deinem Programm erlauben, den Inhalt der Datei im richtigen Format zu lesen und zu schreiben. Ausserdem ist das erfundene Format kein Standardformat.

Das heißt du und deine App sind die einzigen, die das ganze verstehen können.  Mal abgesehen von den ganzen Fehlern, die du dir noch aus Versehen eingebaut hast.

JSON to the rescue!

JSON ist ein Standardformat (ECMA-404), mit dem du die Informationen für deine App ganz einfach beschreiben kannst.

Das Coole dabei: Die gängigsten Programmiersprachen wie JavaScript haben bereits Funktionen um JSON zu schreiben und zu lesen.

//Alle TODO-Daten
var todoDaten;

//Daten aus Text laden
function leseTodoDaten(text) {
  //Text --> JSON
  var jsonObject = JSON.parse(text);
  todoDaten = jsonObject;
}

//Daten in Text speichern
function schreibeTodoDaten() {
  //JSON --> Text
  var text = JSON.stringify(todoDaten);
  return text;
}

Um ein JSON-Objekt aus einem Text zu erstellen, verwenden wir die Funktion JSON.parse und zum schreiben eine JSON-Objektes in einen Text verwenden wir JSON.stringify . In anderen Programmiersprachen siehst das ganze ähnlich aus. JSON hat sich als Standard etabliert, das bedeutet, dass es ganze viele Anbieter im Internet gibt, die ihre Informationen im JSON-Format bereitstellen.

Zum Beispiel Google Calendar API, Google Drive, Google Maps,  Facebook API, Twitter, Youtube, und noch viele mehr, wie z.B hier zu sehen: https://github.com/toddmotto/public-apis und https://any-api.com/

Syntax von JSON

Wir haben nun den Weg gefunden, wie und warum man mit JSON arbeiten kann, aber wie ist denn dieses JSON eigentlich aufgebaut? Schauen wir uns doch mal die TO-DO-Liste etwas genauer an. Zuerst haben wir eine Art Überschrift und darunter eine Liste. Jeder Listeneintrag steht für eine Aufgabe. Diese Aufgabe besteht aus einem Namen und einem Kästchen.

Auf dem Papier würden wir an der Stelle einen Haken zeichnen sobald die Aufgabe erledigt ist. In der Datei müssen wir dies anders beschreiben. Also schreiben wir erstmal

  • ERLEDIGT JA oder
  • ERLEDIGT NEIN hinein.

Unser Objekt besteht aus einer Eigenschaft TODO mit einer Liste. Objekte werden in JSON mit den geschweiften Klammern beschrieben. Eine Aufgabe in unserer TO-DO-Liste ist ebenfalls ein Objekt. Objekte haben Eigenschaften denen man Namen geben kann. In unserem Beispiel ist es die Eigenschaft todos oder die Eigenschaft name als Name der Aufgabe. Vielleicht findest du noch eine Eigenschaft in unserem Beispiel? Eigenschaften bekommen immer einen Wert.

Bei der Eigenschaft Name ist es der Name der Aufgabe als Text, bei der Eigenschaft Erledigt ist es der Wert ob die Aufgabe bereits erledigt wurde.

Das wären ganz einfache Werte. Eigenschaften und Werte werden immer durch einen Doppelpunkt getrennt. Werte dieser Eigenschaften können auch wieder eigene Objekte oder sogar Listen sein. Listen werden mit eckigen Klammern beschrieben. Beispiel: Die Eigenschaft 'todos' besteht aus einer Liste von Objekten.

Hat man eine Liste von Objekten oder Eigenschaften, kann man diese durch ein Komma trennen. Und damit kennst du die komplette Syntax von JSON.

Tutorial JSON Übersicht und Erklärung

Zusammengefassung zu JSON

Als kleinen Überblick schauen wir nochmal in unsere TODO-Liste. Wie man das ganze programmiert findest du im Link zu diesem Video. Wir sehen die geschweiften Klammern, welche das ganze JSON-Objekt beschreiben. Dieses Objekt hat eine Eigenschaft TODO welches als Wert eine Liste hat.

Diese Liste hat Einträge in Form von weiteren Objekten. Jedes Objekt in dieser Liste hat jeweils zwei Eigenschaften: Den Namen der Aufgabe und eine Markierung ob diese Aufgabe bereits ereldigt ist. Kleiner Hinweis dazu: Texte sollte man immer in Hochkommas packen und Wahrheitswerte kann man mit true und false beschreiben. Die Einrückung und die Zeilenumbrüche sind außerdem optional. Sie dienen alleine der Übersicht, weil man JSON als Mensch so nur sehr schwer lesen kann. Damit kannst auf deiner Liste den ersten Punkt bereits abhaken. Fühlt sich gut an, oder?

Das war eine Erklärung zum Thema JSON. Für Fragen und Anregungen nutze bitte die Kommentarfunktion oder schreibe mir einfach eine E-Mail.

Viel Spass beim Nachprogrammieren und bis bald auf lerneProgrammieren.de

  • 16. Oktober 2017
Click Here to Leave a Comment Below 18 comments
otmar - 19. August 2018

verstehe nicht wirklich was der Sinn ist. Jede csv Tabelle macht doch das Gleiche ??? Der Spaltenkopf ist die Eigenschaft und der Feldinhalt der Wert?

Reply
    Arek - 7. September 2018

    Hallo Otmar,

    danke für deinen Kommentar. Ich verstehe ich nicht ganz, an welcher Stelle CSV erwähnt wurde. Wo siehst du den Zusammenhang zum JSON-Thema?
    Aber du hast Recht, technisch gesehen macht jede CSV-Tabelle das selbe, also ist gleich aufgebaut. Lediglich die fachlichen Inhalte ändern sich.

    Beste Grüße
    Arek

    Reply
    derflieger - 9. August 2022

    Wenn jede csv Tabelle das Gleiche macht, warum gibt es dann so viele Programmierer, die das .json Format benutzen?
    Ich an Ihrer Stelle würde mich erstmal informieren und dann losmeckern.

    Reply
      Heinz Brill - 4. März 2023

      Json ist auch interessant wegen seiner Listen, die man
      programmiertechnisch einfach erweitern kann. Versuche das
      mal in einer .csv Datei.
      Ähnlich verhält es sich auch mit den Objekten. Stelle dir
      mal einfach eine Zeile im csv-Format als Datensatz vor.
      Wenn du jetzt noch ein Feld Geburtsdatum und Hobbys einfügen
      willst, wird das schwierig. Dein ganzes Programm muß erheblich
      umgestellt werden. Wenn Hobbys sogar noch eine Liste sein soll,
      sind ja meist mehr als ein Hobby enthalten.

      Als JSON – Datensatz geht es mit den JSON-Funktionen aber ganz
      einfach.

      Reply
    Casparjones - 17. Oktober 2022

    CSV hat nur einfache Werte in den Zeilen, also String/Zahlen. JSON kann aber als Element wiederum ein Objekt haben und unterschiedliche Keys. Außerdem ist JSON nicht an ein „Schema“ gebunden, jede Zeile kann theoretisch unterschiedliche Objekte enthalten. Dadurch wird es um einiges flexibler als CSV. Wobei beides Daten-Formate in Textform sind, die einfach von Programmen einlesbar sind, aber unterschiedliche Probleme lösen können.

    Reply
peter - 23. November 2018

Cool und gut erklärt sogar ein 60 Jähriger hats nun verstaden

Reply
    Arek - 8. Dezember 2018

    Danke für das Kompliment! Das freut mich sehr!

    Reply
Andi B. - 14. Februar 2019

Hallo zusammen,

für mich sind manche „Thesen“ und das Beispiel aus Deinem Blog widersprüchlich .
Am Anfang heißt es „….JSON ist eine Beschreibungssprache…“
Weiter unten kommt dann „….Das Format deiner Textdatei hast du dir gerade ausgedacht! Das bedeutet, dass du die Funktionen programmieren musst, die deinem Programm erlauben, den Inhalt der Datei im richtigen Format zu lesen und zu schreiben. Ausserdem ist das erfundene Format kein Standardformat….“

Dann nochmal weiter unten
„…JSON hat sich als Standard etabliert…“

WER erklärt denn JSON als „Standard“ und „mein Format“ als Nicht Standard -> Das macht doch jeder SW Hersteller mit seinem proprietären Format?
Es gibt doch inzwischen zig Sprachen (.Net, Java, VB, VBA, ABAP,….)
Mir kommt es eher so vor, dass es immer wieder Trends gibt (XML, HTML 5 etc. pp.) denen dann viele hinterherlaufen und so eine „Pseudokomptabilität“ vorgaukeln, die dann aber wieder abhängig z.B. vom verwendeten Browser in der richtigen Version mit den korrekten Addins ist….

Soweit ich weiß gibt es keine weltweite Normungsstelle für eine einheitliche Programmiersprache….
Gäbe es diese könnte man sich ja darauf verständigen wie z.B. auf das ISO Format für (Mengen) Einheiten
Oder was oder wer definiert ECMA-404 -> Wenn ich das in Google eingebe kommen nur JSON Treffer?

Und demzufolge ist für mich JSON ein weiteres „Format“ für eine Sprache und ich bin gespannt welche Sau in 3 Jahren durch das Dorf getrieben wird bzw. ob JSON sich wie etabliert…

Damit will ich diese Seite nicht abwerten -> als erste Information ist dies sicher hilfreich, nur finde ich halt manche Statements etwas gewagt und vielleicht sollte man darüber nachdenken diese zu überarbeiten…

Reply
    Arek - 18. Februar 2019

    Hallo Andi,

    danke für deine Ergänzung und deine Einwände. Widersprüche kann ich keine erkennen.

    Wenn du Daten in deinem eigenen Format speicherst, musst du Funktionen programmieren, die diesen Inhalt lesen bzw. schreiben können. Das ist aufwändig und unter Umständen fehleranfällig. Nutzt man Standards wie z.B. JSON (oder Xml, etc. ), bekommt man diese Funktionen bereits mitgeliefert.
    Es gibt natürlich eine Unmenge an unterschiedlichen Technologien, aus denen man die Qual der Wahl hat.

    Tatsächlich gibt es Organisationen, die sich um die Standardisierung kümmern.

    Beispiel JSON:
    JSON ist definiert im RFC-8259 (und gleichzeitig in ECMA-404). Diese RFC (https://de.wikipedia.org/wiki/Request_for_Comments) werden vom IETF (https://de.wikipedia.org/wiki/Internet_Engineering_Task_Force) definiert bzw. bearbeitet, mehr Infos dazu in den jeweiligen Wikipedia-Artikeln. Die ECMA ist eine weitere Organisation (https://de.wikipedia.org/wiki/Ecma_International). Den ECMA 404-Standard kann man zurzeit hier abrufen: http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf
    Somit ist JSON sogar in zwei konkurrierenden Standards definiert.

    Zudem darf man hier Äpfel nicht mit Birnen vergleichen. Die verschiedenen Technologien haben unterschiedliche Einsatzwecke. So kann man Java nicht mit JavaScript und JSON nicht mit HTML 5 vergleichen.
    Natürlich gibt es Trends und die wird es immer geben. Ein Entwickler denkt sich eine technische Lösung für ein aktuelles Problem aus, verkauft die Idee gut und schon rennen andere Entwickler dem hinterher. Völlig normal, das gibt es auch in anderen Branchen. Die Frage ist nur ob man auf jeden Zug aufspringen muss und wann man mal den richtigen Zug verpasst. Darauf gibt es keine richtige und falsche Antwort.

    Ich hoffe damit etwas Klarheit geschafft zu haben, denn den Überarbeitungsbedarf sehe ich tatsächlich gerade nicht.
    Beste Grüße
    Arek

    Reply
    Johann - 23. März 2021

    Oder was oder wer definiert ECMA-404
    ECMA ist eine Plattform für Industrie-Standards. Du könntest vielleicht einmal http://www.ecma-international.org ansehen.
    Dort werden viele Industrie-Standards definiert. Da der ECMA-Standard 404 JSON standardisiert findest Du mit der Suche natürlich nur JSON-Treffer.
    Wenn Du aber ECMA-411 suchen würdest, kämen die Treffer für die NFC-Verbindungen…

    Reply
    derflieger - 9. August 2022

    Das ist schon interessant, wieviel Menschen es gibt, die denken, sie wüssten, wie die Welt sich dreht.

    Es gibt Dutzende Programmiersprachen. Da frage ich doch auch nicht, warum ist das in Fortran programmiert und nicht Pascal. Die Assembler Sprachen, die es gibt, sind direkt abhängig von dem benutzten CPU Typ. Deshalb war es doch ein Umbruch, als Apple plötzlich mit Intel CPU auf den Markt kam. Jetzt konnte ich auch hier Windows installieren.

    Alles hat sich geschichtlich entwickelt. Die ersten Assembler waren für die Z80 und 6502 CPUs. Hierauf wurden dann die High Level Sprachen aufgebaut.
    Und das ist der Grund, warum ein Basic für den Z80 nicht auf dem 6502 läuft, obwohl es die gleiche Sprache ist. Und alles was danach kam, sowie z.B. HTML, wurde den jeweiligen Bedürfnissen angepasst. Die Script-Sprache z.B. macht es einfacher Zusammenhänge in Befehle umzusetzen. Hier wurde auf der Batch Programmierung aufgesetzt. Es heißt ja auch „Batch Programmierung“ obwohl ich den Umgang mit Batch Befehlen noch nicht als programmieren bezeichnen würde.

    Ich bin überzeugt davon, dass viele der heutigen jungen Programmierer nicht nur die Syntax einer Sprache lernen, sondern sich auch, mit kleinen Beispielen, für die geschichtliche Entwicklung interessieren sollten.

    Zur Info: Ich bin 71 Jahre alt und habe 1973-74 die ersten Microprozessoren programmiert. Ich bitte meinen langen Beitrag zu entschuldigen und als konstruktive Bemerkung zu betrachten und nicht als böse Kritk.

    Reply
erik - 26. März 2019

Wie kann ich das jetzt in eine Json Datei Speichern

Reply
    Arek - 27. März 2019

    Hallo Erik,
    diese Themen erkläre ich in den Praxislektionen im Anfängerkurs. Du kannst ja mal kostenlos reinschauen: https://lerneprogrammieren.de/testzugang

    Beste Grüße
    Arek

    Reply
Christoph - 5. Juni 2020

Hallo Arek,

vielen Dank für das sehr gut gemachte und erklärte JSON-Video.

Eine Frage habe ich noch: Wenn ich bspw. JavaScript nutze, um eine JSON Datei auszulesen, wie kann ich dann mit JS durchiterieren und einzelne Objekte ansprechen und ausgeben? Hast Du dazu eine Nachschlagereferenz?

Reply
    Arek - 8. Juni 2020

    Hallo Christoph,
    wenn du ein JSON-Array hast, kannst du ganz normal mit eine Schleife oder dem forEach durchiterieren.
    Beste Grüße
    Arek

    Reply
Jörg - 24. Juli 2020

Interessantes Video, Dankesehr. Wenn man sich nicht bei YOUTUBE anmelden müsste um ein „gefällt mir“ zu posten, Hättest du bestimmt noch mehr likes.
Aber was ist Bitte der Unterschied zwischen JSON, XML und YML?

Reply
    Arek - 24. Juli 2020

    Wichtig ist, dass es den Leuten hilft 🙂
    Der Unterschied zwischen JSON, XML und YAML ist, dass diese einfach anders „geschrieben“ werden. Also die Syntax bzw. das Format, wie man die Informationen in die Textdatei eingibt, unterscheidet sich. Ansonsten sind diese Sprachen einfach nur da um Daten festzuhalten.
    Beste Grüße
    Arek

    Reply
Thomas - 24. März 2023

Ich muss mich demnächst auch mi JSON beschäftigen. Es gibt beim Volleyball ein Live-Scoring-System namens SAMS.Dort soll bald eine JSON-Schnittstelle bereitgestellt werden, in der der aktuelle Spielstand eines Matches übermittelt wird. Ich will mit einem VB-Programm diese Dateien lesen.

Wie spreche ich solche externen JSON-Dateien an ? Einfach über die URL als Dateiname ? Muss ich eine Schleife laufen lassen, um in meinem Programm die jeweils aktuellen Daten zu haben oder teilt mir der JSON-Hist irgendwie mit, dass sich was geändert hat ?

Reply

Leave a Reply: