JSON als Austauschformat

seafolly.ch/werke.json

seafolly.ch/werke.json

JSON ist die Abkürzung für JavaScript Object Notation. Es dient dem Austausch von Daten und ist ein Format in einer einfach lesbaren Textform. Benutzt wird es in Webanwendungen zur Übertragung und Speicherung strukturierter Daten. Ein gültiges JSON Dokument stellt gültiges JavaScript dar, ist aber grundsätzlich unabhängig von der Programmiersprache.

Eine JSON Datei könnte etwa so aussehen:

{
  "Vorname": "Toni",
  "Name": "Tester",
  "Adresse": {
    "Strasse": "Hauptstrasse 17",
    "PLZ": "3000",
    "Ort": "Bern",
  },
  "Telefon": [
    {
      "type": "Buero",
      "number": "+41 12 345 67 89"
    },
    {
      "type": "Mobil",
      "number": "+41 23 456 78 90"
    }
  ]
}

Das schöne an JSON ist, dass es für Menschen und Maschinen (relativ) einfach zu lesen und zu schreiben ist. Die Variablen, die gespeichert werden, können unterschiedliche Datentypen haben:

  • Null (null),
  • Boolean (true oder false),
  • Zahl (1234, ein Vorzeichen, ein Dezimalpunkt),
  • Zeichenkette (“ … „),
  • Array ([])
    Ein Array kann beliebig viele Werte aller Typen enthalten.
  • Objekt ({ … })
    Ein Objekt kann ebenfalls beliebig viele Werte aller Typen enthalten, darüber hinaus kann über Schlüssel auf die Werte zugegriffen werden.

Dadurch dass JSON Datentypen ermöglicht, kann man damit so ähnlich arbeiten wie mit einer Datenbank.

JavaScript

In JavaScript kann das JSON Format in den Programmcode eingebunden werden. Hier ein Beispiel, in dem Name und Vorname aus dem JSON Format mit dem Befehl JSON.parse() in ein Objekt verwandelt werden und dieses dann unter der id anzeige im Browser anzeigt.

<!DOCTYPE html>
<html>
<body>
<h2>JSON Werte in ein JavaScript Objekt verwandeln</h2>
<p id="anzeige"></p>
<script>
var myJSON = '{"Vorname": "Toni","Name": "Tester" }';
var myObj = JSON.parse(myJSON);
document.getElementById("anzeige").innerHTML = myObj.Vorname;
</script>
</body>
</html>

Datei: json_js.html

Wenn du die Befehle im Browser aufrufst, kannst du die gewünschten Werte im Browser anzeigen. In diesem Beispiel den Vornamen Toni:

JSON Werte in ein JavaScript Objekt verwandeln
Toni

PHP

In PHP kann das JSON Format ebenfalls eingebunden werden. Hier ein ähnliches Beispiel, in dem Name und Vorname aus dem JSON Format mit der Funktion json_decode() in ein Objekt verwandelt werden und dann ebenfalls der Vorname angezeigt wird.

<!DOCTYPE html>
<html>
<body>
<strong>JSON Werte in ein PHP Objekt verwandeln</strong>
<?php
$myJSON = '{"Vorname": "Toni","Name": "Tester" }';
$myObj = json_decode($myJSON);
echo '<p>'.$myObj->Vorname.'</p>';
?>
</body>
</html>

Datei: json_php.php

Wenn du die Befehle im Browser aufrufst ist das Ergebnis wieder:

JSON Werte in ein JavaScript Objekt verwandeln
Toni

JSON und Drupal 8

In einem Beispiel aus der Praxis lassen sich die Möglichkeiten von JSON anschaulich darstellen.

In Drupal 8 kannst du Daten im JSON Format erzeugen. Dazu müssen die Module RESTful Web Services und Serialization aktiviert werden.

Drupal Module RESTful Web Services, Serialization
Drupal Module RESTful Web Services, Serialization

Nach der Aktivierung der Module lässt sich eine Ansicht (View) erstellen, die JSON oder XML ausgibt.

Neue Ansicht erstellen
Neue Ansicht erstellen

Um das Beispiel einfach zu halten, gebe ich nur die Überschriften (title) der gespeicherten Artikel aus.

Ansicht mit Vorschau
Ansicht mit Vorschau

Die Anzeige in der Vorschau kommt uns bekannt vor. Es sind Daten im JSON Format, aufrufbar unter einem eigenen URL. Hier im lokalen Beispiel nenne ich es [Domain]/rest/export/json/article. Der Pfad ist jedoch frei wählbar.

Die JSON Daten kann ich nun beliebig weiter verwenden. Ich könnte sie beispielsweise in den oben beschriebenen json_js.html und json_php.php Dateien verwenden und in anderen Websites integrieren.

Drupal als Datenquelle nutzen

Wenn ich die JavaScript Datei ein wenig umschreibe, liest sie die Daten direkt aus dem Drupal ein. Damit das auch überall und ohne ein lokales Drupal 8 funktioniert, habe ich eine View auf seafolly.ch erstellt (http://seafolly.ch/werke.json). Die Einbindung in die Website lässt sich über ein JavaScript Framework wie jQuery bewerkstelligen, aber auch in ganz normalem JavaScript Code.

<!DOCTYPE html>
<html>
<body>
<strong>JSON Werte aus Drupal 8 darstellen</strong>
<div id="anzeige"></div>
<script>
  var xmlhttp = new XMLHttpRequest();
  var url = "http://seafolly.ch/werke.json";

 xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var myArr = JSON.parse(this.responseText);
      myFunction(myArr);
    }
  };
  xmlhttp.open("GET", url, true);
  xmlhttp.send();

  function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
      out += arr[i].title + '<br>';
    }
    document.getElementById("anzeige").innerHTML = out;
  }
</script>
</body>
</html>

Im Browser sieht es dann so aus:

JSON Werte aus Drupal 8 darstellen
Passion vs. Ratio
La Terre
Deep Blue I
Latvia
Hello, Art
Hochsitze
The Picking Red Berries Blues
Ans Kap – Poster
MaxiLamps

PHP

In PHP funktioniert es ähnlich. Der Daten der URL müssen in eine Variable eingelesen und dargestellt werden

<!DOCTYPE html>
<html>
<body>
<strong>JSON Werte in ein PHP Objekt verwandeln</strong>
<?php
$url = 'http://seafolly.ch/werke.json';
$myJSON = file_get_contents($url);
$myObj = json_decode($myJSON);
$obj_length = count($myObj);
for($i=0; $i < $obj_length; $i++) {
  echo '<p>'.$myObj[$i]->title.'</p>';
}
?>
</body>
</html>

JSON Werte aus Drupal 8 darstellen
Passion vs. Ratio
La Terre
Deep Blue I
Latvia
Hello, Art
Hochsitze
The Picking Red Berries Blues
Ans Kap – Poster
MaxiLamps

Fazit

Mit JSON lassen sich Verbindungen zwischen Websites erstellen. In diesem Beitrag habe ich gezeigt wie man die Daten „on the fly“ anzeigt. Wenn die Datenquelle, in meinem Fall Drupal, geändert wird, so ändert sich auch die Anzeige in der HTML/PHP Datei.

Link

https://wiki.selfhtml.org/wiki/JavaScript/JSON


tl;dr: Datenquellen im JSON Format können vielfältig angezeigt werden

 

Save

Autor: Hagen Graf

consultant, author, trainer, solution finder, web architect, developer, open source lover, visionary, orator, the good old webmaster. Able to simplify!

2 Gedanken zu „JSON als Austauschformat“

  1. Lassen sich eigentlich JSON-Dateien mit einigermassen vertretbarem Aufwand in Excel-Dateien umwandeln? Die JSON-Datei, die zur Diskussion steht, ist rund 30 MB gross, all die verfügbaren Online-Konverter fallen damit auf die Nase… 😉

Kommentar verfassen