PHP-Daten in JavaScript einschleusen

Mein Freund Jason

In WordPress hat man es oft mit großen Datenmengen in komplexer Form zu tun, meist liegen diese Daten in Form eines Objektes vor. Nehmen wir als Beispiel noch mal wp_get_current_user welches uns ein Objekt zurück gibt das eine Instanz von WP_User ist. Das ist eine ganze Litanei an Daten die dann auch noch tief verschachtelt sind. Hier kommt unser Freund Jason ins Spiel. Jason ist ein Held aus der griechischen Mythologie und bedeutet übersetzt so viel wie “der Heilende”. Gut, Jason ist nicht wirklich gemeint. Ich dachte da eher an JSON, aber das spricht man doch genauso aus, oder? Egal.
Schauen wir uns einfach mal folgenden Code-Schnipsel an:

function print_json_script(){

	$vars = array( 'my_js_var' => 'Hallo Welt!',
			'anothervar' => 'Schubidu',
			'deep' => array( 'deeper', 'theDeepest' )
			);

	$object_name_1 = 'foo';
	echo "<script type='text/javascript'>var {$object_name_1} = " . json_encode( $vars ) . "</script>\n";

	$current_user = wp_get_current_user();
	$object_name_2 = 'user';
	echo "<script type='text/javascript'>var {$object_name_2} = " . json_encode( $current_user ) . "</script>\n";	

}

Dieser Code erzeugt in etwa folgende Ausgabe:

<script type='text/javascript'>
	var foo = {"my_js_var":"Hallo Welt!","anothervar":"Schubidu","deep":["deeper","theDeepest"]};

	var user = {"data":{"ID":"1","user_login":"Jason","user_pass":"Oscheleggä","user_nicename":"JSON",...Litanei-Litanei-Litanei...,"user_level":"10","user_firstname":"","user_lastname":"","user_description":""};
</script>

$vars ist ein assoziatives Array welches wiederum ein weiteres Array enthält, solche und noch deutlich komplexer verschachtelte Objekte haben wir in WordPress häufiger. Wollte man solche Objekte mittels Foreach oder ähnlichen Techniken in Schlüssel-Werte-Paare umwandeln, wäre das ein nicht unerheblicher Aufwand. PHP greift uns aber freundlicherweise tatkräftig unter die Arme: json_encode() ist die Zauberformel die aus einem PHP-Objekt ein JS-Objekt macht. Das war jetzt etwas dilettantisch ausgedrückt, denn genau genommen ist es (noch) kein JS-Objekt sondern ein JSON. Setzen wir nun diesem Datengewusel in unserem Script-Block ein var objectName = voran, dann haben wir ein JS-Objekt. Und auf dieses können wir mit objectName.variablenName bequem zugreifen, das Objekt muss noch nicht einmal mit new instanziert werden.
Aber bequem ist die Sache schon…

$translations = array(
	'open' => __('Open'),
	'close' => __('Close'),
	'read' => __('Read'),
	'write' => __('Write'),
	'save' => __('Save'),
	'cancel' => __('Cancel'),
	'submit' => __('Submit')
	);

$js_translations = json_encode( $translations );

Ich denke dieser Code-Schnipsel zeigt deutlich worauf ich im Endeffekt hinaus wollte. Die einzelnen Begriffe können mit gettext in PHP übersetzt werden und dann über json_encode() einem JS übergeben werden. var translation = {...} wandelt das ganze in ein JS-Objekt um und schon kann man in seinem JS mit translation.close, translation.open, usw. die übersetzten Texte ausgeben.
Ich bin jetzt deutlich allgemeiner geworden, denn diese Technik kann natürlich nicht nur mit WordPress, sondern auch mit anderen PHP-Scripten verwendet werden. Dies sei aber nur am Rande erwähnt.