Javascript JSON fetch

JSON-Datei einlesen

fetch ist eine asynchrone Funktion, die Daten lesen (GET) und senden (POST, PUT, PATCH, DELETE) kann. Default ist GET – beim GET braucht fetch nur die URL der JSON-Datei.

Das Project dummyJSON bietet ein REST-API (), erfordert keinen Anwendungsschlüssel und stellt eine Reihe von JSON-Dateien zum Testen zur Verfügung.

function getProducts () {
	fetch('https://dummyjson.com/products')
		.then(res => res.json())
		.then(console.log);
}

getProducts ();

Bei jeder API-Programmierung haben die Daten eine andere Struktur, Schlüssel, Werte und Funktionen. Hier schlüsselt ein Blick in die Konsole die Daten auf.

▼ Object
    N limit: 30
  ▼ O products: Array (30)
    ▶ {id: 1, title: "iPhone 9", description: "An apple mobile ", …}
       …
    N skip: 0
    N total: 100

Das API gibt ein Objekt zurück, in dem ein Array products liegt. Die Elemente des Arrays sind Produktbeschreibungen.

API-Programmierung

1. fetch () holt die Daten von der URL und interpretiert sie als JSON
2. Das Skript übernimmt das Array data.products aus dem gelieferten Objekt, baut in generateOptions () die Optionen für das HTML-select-Element und übergibt data.products an das nächste then ().
3. showProduct () zeigt ein erstes Produkt als Platzhalter und ein eventListener wartet auf die Aktion des Benutzers – die Auswahl eines Produkts aus der Liste.

const selection = document.querySelector ("#products");

function fetchProducts () {
	fetch ("https://dummyjson.com/products/")
		.then ((response) => response.json ())
		.then ((data) => {
			generateOptions (data.products);
			return data.products;
		})
		.then ((option) => {
			showProduct (option [1]);
			selection.addEventListener ("change", (e) => {
				const id = e.target.value;
				showProduct (option [id-1]);
			})
		})
	}

fetchProducts();

select-Listen oder Drop-Down-Menüs weichen vom typischen Schema der Formular-Elemente ab und haben eigene Objekte und Methoden. selection.add fügt ein neues option-Element ein.

function generateOptions (data) {
	data.forEach ((item) => {
		const option = new Option(item.title,item.id);
		selection.add (option);
	});
}

showProduct () bereitet die Daten auf. Hier mal auf die einfache Tour mit innerText bzw. innerHTML.

function showProduct (option) {
	document.querySelector (".category").innerText = option.category;
	document.querySelector (".thumbnail").innerHTML = `<img src="${option.thumbnail}">`;
	document.querySelector (".title").innerText = option.title;
	document.querySelector (".description").innerText = option.description;
	document.querySelector (".rating").innerText = option.rating;
	document.querySelector (".price").innerText = option.price + " $";
}

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.