JSON-Daten im Web

JSON

Wenn Webanwendungen Daten von anderen Webservices laden, dann geschieht dies meistens im JSON-Format. JSON steht für JavaScript Object Notation und ist stark an die Syntax von JavaScript-Objekte angelehnt.

Betrachten wir nochmals ein JavaScript-Array:

const temperatures = [
  { name: 'Hamburg', temp: 2 },
  { name: 'Paris', temp: 4 },
  { name: 'New York', temp: -1 },
  { name: 'Sydney', temp: 20 },
];

In JSON hat dieses Array folgende Form:

[
  {"name":"Hamburg","temp":2},
  {"name":"Paris","temp":4},
  {"name":"New York","temp":-1},
  {"name":"Sydney","temp":20}
]

Die JSON-Datenstruktur stellt alle Eigenschaften (hier name und temp) als Strings dar und kann somit auch als ganzes durch einen String zur Datenübertragung repräsentiert werden.

JSON-Strings lassen sich leicht in JavaScript-Objekte umwandeln, weshalb sich dieses Datenformat sehr gut für den Datenaustausch in Webanwendungen eignet.

my-json-server als API für statische JSON-Daten

Mit Hilfe von my-json-server können statische JSON-Datenquellen als einfache Webservices bereitgestellt werden. Dazu ist lediglich eine Datei namens db.json nötig, welche die JSON-Daten enthält:

{ 
  "locations": [
    { "id": 1, "name": "Hamburg", "temp": 2 },
    { "id": 2, "name": "Paris", "temp": 4 },
    { "id": 3, "name": "New York", "temp": -1 },
    { "id": 4, "name": "Sydney", "temp": 20 }
  ]
}

Hier wurden zusätzlich id-Eigenschaften erstellt, die den eindeutigen Zugriff auf einzelnen Datensätze für die Orte erleichtern. Mit der Eigenschaft locations werden die Daten in einer „Ressource“ zusammengefasst.

Wenn die Datei db.json im Hauptverzeichnis eines GitHub-Repositories gespeichert wird, dann kann auf die Daten via my-json.server.typicode.com zugegriffen werden, z.B.:

https://my-json-server.typicode.com/behrends/workshops/locations/3

⟶ Siehe dazu db.json in github.com/behrends/workshops

Durch die Datei db.json in einem GitHub-Repository (GITHUB-REPO) eines dort registrierten Accounts (GITHUB-USER) kann also auf einzelne Datensätze mit einer bestimmten ID (oben 3) in einem Ressource (RESOURCE, oben locations) dynamisch zugegriffen werden:

https://my-json-server.typicode.com/GITHUB-USER/GITHUB-REPO/RESOURCE/ID

Somit ist es also möglich, mit relativ wenig Aufwand eine statische JSON-Datenquelle im Web bereitzustellen.

{
  "food": [
    {"id":1,"name":"pizza"},
    {"id":2,"name":"burger"},
    {"id":3,"name":"schnitzel"}
  ]
}

Wir werden diese Datenquelle nutzen, um auf diese mit fetch aus der Webanwendung zuzugreifen.