JSON – Eine kurze Einführung

Hier eine kurze und knappe Einführung in das Datenformat JSON welches zur Zeit in alle Munde ist und sich dank seiner Einfachheit grosser Beliebtheit erfreut.

Was ist JSON?

JSON ist die Abkürzung für Javascript Object Notation und ein von Menschen lesbares Format um Daten zu speichern und zu transportieren.

Auf den ersten Blick scheint JSON sehr ähnlich zu sein wie XML jedoch ist JSON keine Markup Language welche die Daten beschreibt wie XML oder HTML, sondern nur ein Plain-Text Austauschformat. Der Vorteil von JSON gegenüber einer Markup Langauge ist, dass nur sehr wenig Speicherplatz für die eigene Strukturinformation verwendet wird und somit weniger Daten transportiert werden.

JSON unterstützt Objekte, Arrays, Strings, Integer, true / false, null und boolesche (booelan) Werte und das tolle daran ist das man all die unterstützten Formate miteinander verschachteln kann.

Wie sieht JSON aus?

Ein simples Beispiel:

var person = {
	"name" : "@podlebar",
	"following" : "275",
	"followers" : "305",
	"tweets" : "3043"
};

Wie man unschwer erkennen kann beginnt ein Objekt mit { und endet mit einem }. Die darin enthaltenen Werte werden durch ein Komma getrennt wobei ein Wert aus einem Schlüssel und einem Wert besteht. Wie vorhin erwähnt kann der Wert ein Array, Objekt etc. sein.

Sollte der Wert eines Schlüssels ein Array sein so beginnt diese mit [ und endet mit einem ].

var favoriten = {
	"webseiten"   : [ "robocode.ch", "liip.ch", "twitter.com" ],
	"musik"   : [ "deep house", "nu disco", "nu jazz" ]
};

Wie man in den beiden Beispielen sehen kann beginnen und enden Strings mit einem Anführungszeichen.

Wie braucht man JSON (mit Javascript)?

Ich brauche JSON vorallem wenn ich Inhalt via AJAX anfordere und irgendwo ausgeben möchte jedoch kann JSON in fast allen gängigen Programmiersprachen verwendet werden.

Viele APIs (Application programming interface) verwenden heute schon dieses Format für den Austausch von Daten. Twitter bietet das unter anderem bei der search Methode an aber auch Yahoo oder Flickr oder bit.ly verwenden dieses Format.

Hier ein einfaches Beispiel:

1
2
3
4
5
6
7
8
9

<script type="text/javascript">
	var person = { 
		"name" : "@podlebar",
		"following" : "275", 
	    "followers" : "305", 
	    "tweets" : "3043" 
	};
	alert('Hallo '+ person.name +'.. Du hast '+ person.followers +' Follower, folgst '+ person.following +' Personen und hast schon '+ person.tweets +' Tweets gezwitschert');
</script>

oder hier mit einem Werte-Array:

1
2
3
4
5
6
7

<script type="text/javascript">
	var favoriten = { 
		"webseiten" : [ "robocode.ch", "liip.ch", "twitter.com" ],
		"musik" : [ "deep house", "nu disco", "nu jazz" ]
	};
	alert(favoriten.webseiten[1]); // liip.ch
</script>

oder mit mehreren Datensätzen:

1
2
3
4
5
6
7
8
9
10
11

<script type="text/javascript">
	var book = [{ 
	    "name" : "Einstieg in TYPO3 4.3 ",
	    "publisher" : "Galileo" 
	}, 
	{ 
	    "name" : "Head First PHP & MySQL",
	    "publisher" : "O'Reilly Media" 
	}];
	alert('Tipp: '+ book[1].name +' von '+ book[1].publisher); // Tipp: Head First PHP & MySQL von O'Reilly Media
</script>

Easy oder?

Weitere Informationen

Hier noch einige interessante Links zum Thema:

• JSON (offizielle Seite)
• Prototype JS – Introduction to JSON
• jQuery, Ajax, Json and Php
• jquery-json JSON plugin for jQuery, provides simple ways to convert to JSON and back again.