Objekte, Arrays und der Unterschied zu JSON

1. JavaScript-Objekt

Ein Objekt ist wie eine kleine Karteikarte. Es hat Eigenschaften. Jede Eigenschaft hat einen Namen und einen Wert.

const user = {
  name: 'Mina',
  age: 22,
  points: 80,
};

console.log(user.name);
console.log(user.points);

In JavaScript duerfen Eigenschaftsnamen oft ohne Anfuehrungszeichen geschrieben werden. In JSON muessen sie aber in doppelten Anfuehrungszeichen stehen.

2. JavaScript-Array

Ein Array ist eine Liste. Du nutzt es, wenn du mehrere aehnliche Werte speichern willst: mehrere Lektionen, mehrere Aufgaben oder mehrere Namen.

const lessons = ['Dart Einstieg', 'JSON Grundlagen', 'Testing'];

console.log(lessons[0]);
console.log(lessons.length);

Arrays starten bei Index 0. Das erste Element ist also lessons[0], nicht lessons[1].

3. Array aus Objekten

In Apps speichert man haeufig Listen von Objekten. Eine Aufgabenliste ist ein gutes Beispiel: Jede Aufgabe hat Titel, Status und Punkte.

const tasks = [
  {
    title: 'JSON lesen',
    isDone: true,
    points: 10,
  },
  {
    title: 'localStorage testen',
    isDone: false,
    points: 20,
  },
];

console.log(tasks[0].title);
console.log(tasks[1].isDone);

4. Objekt zu JSON-Text machen

Speicherung im Browser oder in einer Datei braucht meistens Text. Ein JavaScript- Objekt ist aber erstmal kein Text. Mit JSON.stringify wandelst du ein Objekt in JSON-Text um.

const user = {
  name: 'Mina',
  points: 80,
};

const jsonText = JSON.stringify(user);

console.log(jsonText);

Ergebnis:

{"name":"Mina","points":80}

5. JSON-Text wieder zu Objekt machen

Wenn du gespeicherten JSON-Text wieder benutzen willst, brauchst du wieder ein JavaScript-Objekt. Das macht JSON.parse.

const jsonText = '{"name":"Mina","points":80}';
const user = JSON.parse(jsonText);

console.log(user.name);
console.log(user.points);

Merksatz: stringify macht aus Daten Text. parse macht aus Text wieder Daten.

6. Vergleich: JavaScript-Objekt und JSON