Javascript JSON Object, JSON Array of Objects

JSON Object, JSON Array

JSON basiert auf zwei Datenstrukturen: Objekten und Arrays. Ein Objekt besteht aus Name-Wert-Paaren, ein Array ist eine Liste von Werten, die selber Objekte sein können.

JSON-Objekte ähneln Javascript-Objekten, aber JSON-Objekte können keine Funktionen als Wert enthalten. Wenn ein JSON-Objekt beschrieben wird, liegt ein normales Javascript-Objekt vor, das aus einem JSON-String deserialisiert wurde und das wieder als JSON-String serialisiert werden kann.

const obj = { 
   "name" : "Wanderlust" , "children" : [ 
      {"tour":"Frankreich"}, 
      {"tour":"Devon"} 
    ]
};

const jsonArr = [
   { "name" : "Wanderlust", "children" : [ 
      { "tour" : "Frankreich" },
      { "tour" : "Devon" }
   ]},
   { "name" : "Fahrradtouren", "children" : [ 
       { "tour" : "Ostseeküste" },
       { "tour" : "Friesland" }
   ]}
];

console.log (jsonObj.tour1 )      > Frankreich
console.log (jsonArr[1].name)     > Fahrradtouren

jsonArr[1].children.push({"tour":"Emmerich"});

console.log (jsonArr[1].children)

jsonArr[1].children – [{tour: "Ostseeküste"}, {tour: "Friesland"}]

Wie schon erwähnt: Das Schöne an JSON Arrays sind die bequemen Array-Methoden: array.push() hängt neue Elemente direkt an das JSON-Array an.

data.push (jsonArr);

JSON aus Datei einlesen

Der einfachste Weg, eine JSON-Datei einzulesen, ist Javascript fetch (). Javascript allein reicht schon und keine serverseitige Anwendung muss beispringen.

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

Um JSON auf dem Server zu speichern, wird NodeJS mit dem FS-Modul benötigt oder JSON muss an ein serverseitiges Script (meist PHP) übergeben werden.

Anders als beim Lesen der JSON-Datei mit dem einfachen fetch("data.json") braucht fetch() jetzt die URL der Anwendung und die Optionen POST, headers und body.

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 04: ", 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}";
}

JSON.stringify

stringify () ist eine eingebaute Funktion, die aus einem Objekt oder Array einen JSON-String erzeugt, z.B. um Daten an eine Anwendung durchzureichen.

JSON.stringify(value, replacer, space)

value

Wert, der in einem JSON-String umgewandelt werden soll

replacer (optional)

Eine Funktion oder ein Array, das als Filter wirkt. Beides wird auf jedes Element angewendet.

space (optional)

Steuert den Leerraum im String und kann ein String oder Zahl sein. Eine Zahl wird als Anzahl von Zeichen für das Einrücken interpretiert.

let jsonString = JSON.stringify(json, null, ".");
elem.innerHTML = jsonString;

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);

Weil man bei den verschachtelten JSON-Objekten in JSON-Arrays immer wieder vor der Frage steht, ob es sich bei einer Struktur gerade um ein Array handelt, ist Array.isArray () eine willkommene Hilfestellung.