JSON

JSON ist ein wichtiges Datenaustauschformat und eine eine Abkürzung für die Bezeichung „JavaScriptObjectNotation“. Mit Hilfe von JSON werden häufig Daten zwischen verschiedenen Webanwendungen ausgetauscht.

Daten werden in JSON in der Regel als Objekte mit Schlüssel-/Wert-Paaren und Arrays dargestellt. Im Prinzip basiert JSON auf einem Teil der JavaScript-Syntax:

{
  "people": [
    {
      "id": 1,
      "name": "Alice"
    },
    {
      "id": 2,
      "name": "Bob"
    }
  ],
  "cities": [
    {
      "code": "FR",
      "name": "Freiburg"
    },
    {
      "code": "KA",
      "name": "Karlsruhe"
    },
    {
      "code": "OG",
      "name": "Offenburg"
    }
  ]
}

Im Beispiel sind Daten für Personen und Städte zu sehen, die als ein JSON-Objekt zusammengefasst sind. Die Ähnlichkeit zu JavaScript-Objekten ist offensichtlich. Allerdings müssen die Bezeichner der einzelnen Schlüssel (people, id, name, usw.) als Strings angegeben werden.

Im Rahmen des Programmierprojekts kann JSON genutzt werden, um Daten, die aus JavaScript-Objekten oder -Arrays bestehen, zur späteren Verwendung abzuspeichern. Hierfür steht direkt in JavaScript ein Objekt namens JSON bereit, das nützliche Hilfsmethoden enthält.

Dazu ein Beispiel mit einem Array bestehend aus Objekten, die Personendaten enthalten:

const myContacts = [
    {
      id: 1,
      name: "Alice"
    },
    {
      id: 2,
      name: "Bob"
    }
];

Dieses Array lässt sich mit der Methode JSON.stringify() in einen String umwandeln, der im JSON-Format ist:

// JSON ist in JavaScript enthalten 
// --> kein import für JSON nötig
const jsonString = JSON.stringify(myContacts);
 
console.log(jsonString);
// --> ergibt das Array als JSON-String:
// [{"id":1,"name":"Alice"},{"id":2,"name":"Bob"}]

Dieser JSON-String (im Beispiel jsonString) ist also im JSON-Format und kann nun z.B. in Datenübertragungen im Web oder zur Speicherung in einer Datei oder Datenbank verwendet werden — denn letztendlich ist dies ein gewöhnlicher String bzw. Text.

Umgekehrt kann aus einem JSON-String wieder das entsprechende JavaScript-Objekt oder -Array hergestellt werden. Dazu wird ein JSON-String an die Methode JSON.parse übergeben, die ein JavaScript-Objekt bzw. -Array erzeugt:

const jsObject = JSON.parse(jsonString);
console.log(jsObject);
// --> ergibt ein Array, das die gleichen
// Elemente wie myContacts enthält

Somit kann für ein JavaScript-Objekt durch JSON.stringify ein JSON-String erstellt werden, der wiederum mit JSON.parse in ein JavaScript-Objekt umgewandelt werden kann, das dem ursprünglichen Objekt entspricht:

JSON.parse(JSON.stringify(myContacts))
   ergibt
myContacts

JSON-Daten aus Dateien einlesen

Wenn eine Datei JSON-Daten enthält, dann können diese mit einer Zeile Code so eingelesen werden, dass die Daten (Array und/oder Objekte) dem Programm zur Verfügung stehen.

Angenommen, eine Datei namens data.json enthält folgenden Inhalt:

[
  {"id": 1, "name": "Jane"}, 
  {"id": 2, "name": "Joe"},
  {"id": 3, "name": "Kim"}
]

Wenn eine JavaScript-Datei im gleichen Verzeichnis wie data.json liegt, dann kann diese JSON-Datei in einem JavaScript-Programm in Node.js oder replit so eingelesen werden:

// JSON direkt importieren und als JavaScript interpretieren
import data from './data.json' with { type: 'json' };
console.log(data); // JavaScript Daten werden ausgegeben

Danach stehen die Daten in der Konstanten data zur Verfügung:

console.log(data[2].name); // --> ergibt Kim

Mehr dazu in der Node.js Dokumentation.

Wenn wir den Fall behandeln möchten, dass die Datei data.json nicht existiert oder kein gültiges JSON enthält, dann können wir einen dynamischen Import verwenden:

let data = [];
try {
  const jsonData = await import('./data.json', {
    with: { type: 'json' },
  });
  data = jsonData.default;
} catch (error) {}

Hier setzen wir try…catch ein, was auf der nächsten Seite erläutert wird. Auch await wird später besprochen.

JSON-Datei speichern:

Node.js hat Funktionalitäten, um Dateien zu speichern, z.B. die Methode writeFileSync aus dem Modul fs. Damit lassen sich Daten in Dateien speichern.

Wir importieren zunächst fs:

import fs from 'fs';

Angenommen, wir haben eine Liste von Städten, die wir als JSON in einer Datei speichern wollen:

const myData = [
  { name: 'Berlin', id: 5 },
  { name: 'Hamburg', id: 4 },
  { name: 'München', id: 3 },
  { name: 'Köln', id: 2 },
  { name: 'Frankfurt', id: 1 },
];

Wir können nun das Array myData in JSON umwandeln und als Datei speichern:

const jsonString = JSON.stringify(myData);
 
fs.writeFileSync('./mydb.json', jsonString);

Dies erzeugt die Datei mydb.json im Projektordner.

Wir erhalten somit eine simple Vorgehensweise erhalten, um die Daten unseres Programms zu speichern.