JSON aus Datei einlesen
fetch ist eine asynchrone Funktion, die Daten lesen (GET) und senden (POST) kann. Default ist GET – beim GET braucht fetch nur die URL der JSON-Datei.
function appendData (data) {
console.log (data);
document.querySelector ("div").innerHTML = JSON.stringify(data);
}
fetch ("data.json").then (function (response) {
return response.json();
}).then (function (data) {
appendData (data);
}).catch (function (error) {
console.log ("error: " + error);
});
JSON Datei speichern
Meistens wird JSON aus Datenquellen gelesen, in interaktiven Seiten aber auch geändert und als JSON-Datei serverseitig gespeichert.
Anders als beim Lesen der JSON-Datei mit dem einfachen fetch ("data.json") braucht fetch() beim Senden von JSON die URL der Anwendung und die Optionen POST, headers und body.
Ein POST-Request kann eine body-Option haben, die einen String (hier JSON stringify) aufnimmt. Mit body muss auch immer der entsprechende Inhaltstyp {'Content-Type' : 'application/json'} angegeben werden.
function saveToServer (data) { const jsonArr = {"name":"Wanderlust","children":[{"name":"Frankreich"},{"name":"Devon"}]}; data.push (jsonArr); window.fetch ("update.php", { method: 'post', headers: {'Content-Type' : 'application/json'}, body: JSON.stringify(data) }) .then ( (text) => { // log response text console.log (text); }) .catch ((error) => { console.log ("Error: ", error) }) }
Ein einfaches Beispiel für eine PHP-Anwendung auf dem Server
<?php
$json = file_get_contents("php://input");
if (!empty($json)) {
$data = json_decode($json, true);
} else {
echo "Error 01: JSON data empty";
die;
}
// Wenn die Datei data.json noch nicht existiert, wird sie als leere Datei angelegt
$jsonfile = "./data.json";
if (!file_exists ($jsonfile)) {
file_put_contents($jsonfile, '');
}
if ( file_put_contents ($jsonfile, json_encode($data))) {
echo "Data {$jsonfile} successfully saved";
} else {
echo "Error 02: Could not save {$jsonfile}";
}
Neben GET und Post gibt es JSON HEAD, um HTTP-Header-Felder zu übermitteln, ohne dabei auf eine serverseitige Anwendung zurückzugreifen.
IE11 unterstützt fetch nicht – aber es gibt ein kleines Polyfill: Bare minimum fetch polyfill in 500 bytes auf Github.
Nested JSON-Array in nested HTML list
Häufiger als die Ausgabe des JSON-Strings wird ein JSON-Array auf Webseiten als verschachtelte Liste dargestellt.
let nestedList = function(container, json) { const ul = document.createElement('ul'); json.forEach (function (elem, item) { const row = json[item]; const li = document.createElement('li'); li.textContent = row.name; let nodes = row.children; if(nodes && nodes.length) { nestedList(li, nodes); } ul.appendChild(li); }); container.appendChild(ul); }; var container = document.querySelector(".json"); nestedList(container, json);
Auch das Zurück aus der verschachtelten Liste in ein JSON-Array ist eine rekursive Funktion.