Mit JSON arbeiten

Von Kris Terziev 21-07-2021 Programmierung 11 Minuten

JSON (JavaScript Object Notation) ist eine leichtgewichtige, textbasierte Formatierung für den Datenaustausch. Programmierer verwenden es, um Daten von einem Server zu einem Client und umgekehrt zu übertragen. Obwohl JSON eine JavaScript-Notation darstellt, benötigt es kein JavaScript, um es zu lesen oder zu schreiben. Stattdessen ist JSON eine unabhängige Sprache und verwendet Schreibkonventionen und Strukturen wie andere Programmiersprachen der C-Familie wie Java, Python, C++ und C#. Webentwickler verwenden JSON zur Integration in andere Sprachen, z. B. Python.

Warum ist JSON wichtig?

JSON wurde in den frühen 2000er Jahren von Douglas Crockford spezifiziert und bekannt gemacht. Die Programmiersprache entstand aus der Notwendigkeit, ein effizienteres und schnelleres System für die Übermittlung von Daten zwischen Servern zu entwickeln.
Damals empfingen und verarbeiteten Server in HTML-Seiten die von den Benutzern gestellten Anfragen. Die Idee, den Server als Hauptarbeitskraft einzusetzen, erwies sich als zeitaufwändig und ineffizient. Eine bessere Möglichkeit, die Arbeitslast zu verteilen, bestand darin, Webanfragen im Hintergrund laden zu lassen, anstatt den Inhalt der gesamten Seite zu aktualisieren.

Webseiten können heute mehr als nur Informationen anzeigen.Sie sind auf APIs angewiesen, um Inhalte und Prozesse zu laden. Außerdem sind sie auch von sozialen Medien abhängig, um Verifizierungen, Registrierungen/Anmeldungen (z. B. Google- und Facebook-Konto-API) und andere anmeldungsabhängige Funktionen durchzuführen. Da Webnutzer diese Anfragen stellen, müssen die Seiten schnell und asynchron geladen werden.
Die Arbeit eines Front-End-Entwicklers wird durch JSON, das im Hintergrund arbeitet, erheblich vereinfacht. JSON ist bei der Bearbeitung von HTTP-Anfragen äußerst effizient. Es lädt Daten und verbessert die Antwortzeit, indem es dem Frontend-Entwickler einen beträchtlichen Teil der Arbeit abnimmt und den Hauptzugangspunkt des Kunden zu den Produkten, die Webseiten, entlastet.

JSON Vs XML

SOAP- und REST-APIs

Experten vergleichen JSON oft mit seinem Vorgänger XML (Extensible Markup Language). XML ist ebenfalls ein Datenaustauschformat für die Speicherung von Informationen auf der Serverseite und die Bereitstellung im Web. Es wird ausschließlich für das Nachrichtenprotokoll SOAP (Simple Object Access Protocol) verwendet. SOAP ist die Art und Weise, wie XML definiert, welche Informationen wie übermittelt werden. Es erweitert HTTP für den XML-Nachrichtenaustausch und ermöglicht den Datentransport für Webdienste.
REST (Representational State Transfer).>

Mit dem Aufschwung von JSON wurde auch REST zum bevorzugten Messaging-Protokoll und überholte bald SOAP. REST hatte auch einen großen Vorteil: Es erlaubte Datenformate wie XML, HTML und JSON, im Gegensatz zu SOAP, das nur XML zuließ.
XML und JSON haben Gemeinsamkeiten: Programmierer verwenden sie beide, um Daten vom Client zum Server und umgekehrt zu übertragen. Außerdem sind sie plattform- und sprachunabhängig. Es gibt jedoch entscheidende Unterschiede, die JSON zu einer besseren Wahl gemacht haben.

JSON ist ein besser lesbares Format. Es verwendet keine End- und Start-Tags wie XML.
Es unterstützt Arrays - XML dagegen nicht.
Es stellt Objekte dar, während XML Datenelemente unterstützt.
Es ist nicht so umfassend und schneller als XML.

Die Struktur und Syntax von JSON

Die JSON-Struktur ist mit JavaScript-Objekten und Python-Wörterbüchern vergleichbar, obwohl sich die Hauptfunktionen unterscheiden. JSON hat zwei Hauptstrukturen:

Array: Eine geordnete Liste von Werten. Diese öffnet und schließt mit eckigen Klammern: [ ].

"cars": [ 
  "ford", 
  "volvo", 
  "ferrari" 
]

Objekt:Dies ist die weit verbreitete Form von JSON. Es handelt sich um eine ungeordnete Sammlung von Schlüssel- und Wertepaaren, die durch einen Doppelpunkt getrennt sind. Es öffnet und schließt mit geschweiften Klammern: { }.

"book": { 
  "name": "Things Fall Apart", 
  "author": "Chinua Achebe", 
  "year": 2000, 
  "genre": "Fantasy Fiction", 
  "bestseller": true 
}

Verschachtelte Strukturen können Objekte innerhalb von Arrays oder Arrays innerhalb von Objekten enthalten.

Zugriff auf JSON-Daten

Es gibt zwei Möglichkeiten, auf Daten in einem JSON-Programm zuzugreifen – Punktnotation oder Klammern. Bei Arrays können wir auch das typische Indexierungssystem verwenden, um innere Werte zu erhalten.

Angenommen, wir haben den folgenden Datensatz:

const StudentData = { 
  "name": "Regina White", 
  "age": 22, 
  "hobby": { 
    "reading" : true, 
    "gaming" : false, 
    "sport" : "volleyball" 
  }, 
  "social_handles" : [ 
  {
    "site" : "twitter", 
    "link" : "https://twitter.com/" 
  }, 
  { 
    "site" : "facebook", 
    "link" : "https://www.facebook.com/" 
  }, 
  { 
    "site" : "tiktok", 
    "link" : "https://tiktok.com/" 
  }],
  "classes" : ["Mathematics", "English", "Physics", "Chemistry"] 
}

Verwendung der Punktnotation

// accessing JSON Student data 
console.log(StudentData.name); // Regina White 
console.log(StudentData.hobby); // { reading: true, gaming: false, sport: "volleyball"} 
 
console.log(StudentData.hobby.sport); // volleyball 
console.log(StudentData.social_handles[1].site); // facebook

Verwendung von Klammern

// accessing JSON object using brackets 
console.log(Student data["name"]); // Regina White
console.log(Student data["hobby"]["sport"]); //Volleyball

JSON-Datentypen

JSON hat sechs Datentypen: String, Zahl, Boolean, Objekt, Null und Array.

JavaScript Object Literals vs. JSON

Anhand der obigen Codestruktur können wir sehen, wie sehr die JSON-Syntax den JavaScript Object Literals ähnelt und wie leicht man sie mit anderen Strukturen verwechseln kann. Aber hier sind drei wichtige Unterschiede, die JSON von anderen JavaScript-basierten Konstruktionen unterscheiden:

1.JSON verlangt, dass sowohl der Schlüssel als auch die Werte in Anführungszeichen eingeschlossen werden. Im Gegensatz dazu wird in den JavaScript-Objektliteralen der Schlüssel nicht in Klammern eingeschlossen.
2.JSON funktioniert nicht mit Funktionen, JavaScript Objekte schon.
3.JSON kann extern in einer Datei mit der Erweiterung .json gespeichert und mit einer HTML-Seite verknüpft werden. JavaScript-Objekte werden immer direkt in den JavaScript-Code geschrieben.

Parse() und Stringify()

Parse() und stringify() sind integrierte Funktionen zur Umwandlung von JSON-Daten in Objekte und umgekehrt.

Parse() – konvertiert JSON-Daten in ein JavaScript-Objekt.

// json object 
const jdata = '{ "name": "Regina White", "age": 22 }'; 
 
// converting to JavaScript object 
const obj = JSON.parse(jData); 
 
// accessing the data 
console.log(obj.name); // Regina White

Stringify() - konvertiert JavaScript-Objekt in JSON

// JavaScript object 
const Data = { "name": "Kingsley Peters", "age": 20 }; 
 
// converting to JSON 
const obj = JSON.stringify(Data); 
 
// accessing the data 
console.log(obj); // "{"name":"Kingsley Peters","age":20}"

Laden einer JSON-Datei in HTML

<html> 
<head> 
  <title>JSON DEMO</title> 
</head>
<body>

<script language = "javascript"> 
//Here the JSON data format is written directly in the HTML page and accessed with DOM manipulation 
var student1 = {  
  "rollnum": "001", 
  "name": "Regina White", 
  "age": 22, 
  "classes" : ["Mathematics", "English", "Physics", "Chemistry"],
  "degree": "BTech", 
  "Faculty": "Faculty of Science"
};

document.write ("<p>Roll Number = " + student1.rollnum+"</p>"); 
document.write ("<p>Name of Student = " + student1.name+"</p>");   
document.write ("<p>Classes Taken = " + student1.classes+"</p>");    

document.write ("<p>Faculty = " + student1.faculty+"</p>");  
document.write ("<p>Degree to be earned = " + student1.degree+"</p>");  

var student2 = {
  "rollnum": "002", 
  "name": "Kingsley Peters", 
  "age": 20, 
  "classes" : ["History", "English", "Government", "Chemistry"],
  "degree": "BA", 
  "Faculty": "Faculty of Arts" 
}; 

document.write ("<p>Roll Number = " + student1.rollnum+"</p>"); 
document.write ("<p>Name of Student = " + student1.name+"</p>");   
document.write ("<p>Classes Taken = " + student1.classes+"</p>");    

document.write ("<p>Faculty = " + student1.faculty+"</p>");  
document.write ("<p>Degree to be earned = " + student1.degree+"</p>");  

var student3 = {  
  "rollnum": "003", 
  "name": "Linda Forson", 
  "age": 22, 
  "classes" : ["Chemistry", "English", "Biology", "Commerce"],
  "degree": "BSc", 
  "Faculty": "Faculty of Science" 
}; 

document.write ("<p>Roll Number = " + student1.rollnum+"</p>"); 
document.write ("<p>Name of Student = " + student1.name+"</p>");   
document.write ("<p>Classes Taken = " + student1.classes+"</p>");    
          
document.write ("<p>Faculty = " + student1.faculty+"</p>");  
document.write ("<p>Degree to be earned = " + student1.degree+"</p>");  

var student4 = {  
  "rollnum": "004", 
  "name": "Daniel James", 
  "age": 25, 
  "classes" : ["History", "Computer", "Biology", "Commerce"],
  "degree": "BSc", 
  "Faculty": "Faculty of Science" 
}; 

document.write ("<p>Roll Number = " + student1.rollnum+"</p>"); 
document.write ("<p>Name of Student = " + student1.name+"</p>");   
document.write ("<p>Classes Taken = " + student1.classes+"</p>");    
          
document.write ("<p>Faculty = " + student1.faculty+"</p>");  
document.write ("<p>Degree to be earned = " + student1.degree+"</p>");  
</script> 

</body> 
</html>

Dokumentendatenbank oder NoSQL-Datenbank

Eine Dokumentendatenbank, auch NoSQL-Datenbank genannt, stellt ein alternatives Datenmodell zu den gängigen relationalen Datenbanken wie SQL dar. Die wichtigsten Merkmale von NoSQL-Datenbanken sind, dass sie in Form von Dokumenten und Schlüssel-Wert-Paaren vorliegen. Die Abfrage und Speicherung von Daten erfolgt in JSON-Formaten und nicht in der typischen tabellarischen Form von Zeilen und Spalten. Das NoSQL-Datenbankmodell entwickelt sich schnell zu einer würdigen Alternative zu tabellarischen Datenbanken, und JSON ist das Herzstück dieser Datenbank.
In kürzester Zeit haben Entwickler das NoSQL-Modell wegen seiner Flexibilität, Einfachheit und Skalierbarkeit angenommen. Einer der größten Vorteile ist, dass die Entwickler keine Schemata vor der Programmierung planen müssen. Die Datenbank ist so flexibel, dass sie sich mit der Anwendung weiterentwickelt. Dies reduziert den Zeitaufwand für die Erstellung von Datenmodellen und fördert schnellere Softwareentwicklungszyklen.
Die Dokumentendatenbank von JSON bietet auch reichhaltige Datenstrukturen, die es ermöglichen, die Daten so zu strukturieren, wie es der Entwickler bevorzugt – durch Diagramme, Schlüssel-Wert-Paare, Zeitreihen, reichhaltige Objekte oder Geodaten.

Vorteile von JSON

JSON ist dafür bekannt, dass es leichtgewichtig ist. Eine Eigenschaft, die dafür sorgt, dass es Reaktionen schnell ausführt.
Es genießt eine umfassende Browserunterstützung.
Es ist leicht zu lesen und zu verstehen.
Es speichert Daten in nicht-relationalen Datenbanken.

So wunderbar JSON auch sein mag, es hat auch seine Schattenseiten. Einige der Nachteile sind:

Es ist im Vergleich zu XML nicht sehr sicher.
Es ist auf nur sechs Datentypen beschränkt.
Es ist nicht selbstbeschreibend wie XML.

Fazit

Das leicht lesbare Format und die einfache Verwendung von JSON haben dazu geführt, dass es heute ein Industriestandard für die Datenübertragung ist. Es wurde in großem Umfang von großen Technologieunternehmen wie Google, Twitter und Facebook übernommen. Twitter verwendete bis 2013 XML, bevor es dieses Format zugunsten von JSON aufgab.

XML entwickelte sich in den 90er Jahren zu einem wichtigen Faktor bei der Organisation von Inhalten und half JSON, einen Schritt weiter zu gehen, indem es versuchte, universelle Nachrichten ohne spezielles Parsing zu übertragen. Die große Zukunft von JSON ist nicht nur durch den Erfolg seines großen Bruders JavaScript gekennzeichnet. Sein enormes Potenzial liegt auch in seiner Fähigkeit begründet, programmiersprachenübergreifend zu kommunizieren – ein echtes Zeichen für Innovation durch Integration.

Mit JSON arbeiten