Javascript JSON fetch

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.