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.
Nach der Aktivierung der Module lässt sich eine Ansicht (View) erstellen, die JSON oder XML ausgibt.
Um das Beispiel einfach zu halten, gebe ich nur die Überschriften (title) der gespeicherten Artikel aus.
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
Schreibe einen Kommentar