Alex_: multidimensionales/assoziatives json ausgeben

Ich habe ein mehrdimensionales Array mit folgenden Aufbau

<?php
$statistik =	array(
					'adam' => array(
						'spieler' => array(
							'pkt' => array(
								'bez' => 'Punkte',
								'wert' => 500
							),
							'zeit' => array(
								'bez' => 'Spielzeit in Sekunden',
								'wert' => 420
							)
						),
						'klasse' => array(
							'jumper' => array(
								'bez' => 'Springer',
								'wert' => 1
							),
							'runner' => array(
								'bez' => 'Läufer',
								'wert' => 0
							)
						)
					),
					'zohan' => array (
						'spieler' => array (
							'pkt' => array(
								'bez' => 'Punkte',
								'wert' => 1500
							),
							'zeit' => array(
								'bez' => 'Spielzeit in Sekunden',
								'wert' => 924
							)
						),
						'klasse' => array(
							'jumper' => array(
								'bez' => 'Springer',
								'wert' => 1
							),
							'runner' => array(
								'bez' => 'Läufer',
								'wert' => 0
							)
						)
					)
				); 
?>

Dieses ist in der aktuellen PHP-Datei "verfügbar". Nun soll per JS/jQuery bei Klick auf ein div-Element eine Liste mit den Statistikwerten des Spielers ausgegeben werden, dessen Key der Element-ID entspricht.

Die HTML-Elemente:

<div id="adam">Adam</div>
<div id="zohan">Zohan</div>
<div id="ausgabe">Hier sollen die Statistikwerte erscheinen</div>

Meine jQuery-Versuche:

<script>
	$(document).ready(function(){
		$( 'div' ).click(function() {
			var id = $(this).attr('id');
			var json = <?php echo json_encode($statistik); ?>;
			//var json = { pkt: ['Punkte', '500', 'blubb'] }; // Mit diesem eindimensionalen Testarray klappt es
			$( "#ausgabe" ).text(id);
				var ul = $('<ul>').appendTo(ausgabe);

				$(json.pkt).each(function(index, item) {
					ul.append(
						$(document.createElement('li')).text(item)
					);
				});
		});
	});
</script>

Mit dem auskommentierten eindimensionalem nummerischen Array klappt es mit der Ausgabe. Mir ist klar, dass ich die each-Schleife anaolog zu foreach in PHP verschachteln muss. Ich weiß nur nicht wie(?). Erschwerend kommt hinzu, dass ich keine nummerischen Indizes sondern assoziative verwende und ich es damit noch nichtmal eindimensional hinbekomme.

Ich hoffe, dass eine Verschachtelung irgendwie möglich ist. Alternativ fällt mir jetzt nur ein, einfach die Werte aller Spieler ins HTML einzufügen und auszublenden und dann per Klick nur noch die Einblendung des gewünschten Spielers vorzunehmen.

Kann mir jemand helfen, wie ich die Statistikwerte eines bestimmten Spielers (z.B. Adam) aus dem obigen Array mithilfe von jQuery bei Klick ausgeben kann?

Freundliche Grüße Alex

  1. Schön wäre es, wenn ich nicht die json_encode-Funktion nur auf Array des gewünschten Spielers anwenden könnte, aber hier weiß ich nicht ob/wie es möglich ist, die id des DIV-Elementes bzw. die variable id an PHP zu übergeben.

    So klappt es jedenfalls nicht:

    var id = $(this).attr('id');
    var json = <?php echo json_encode($statistik[id]); ?>
    
  2. Tach!

    Ich habe ein mehrdimensionales Array mit folgenden Aufbau

    Ich würde es als verschachteltes Array bezeichnen. Für eine Dimensionalität fehlen die diesbezüglichen mathematischen Eigenschaften. Aber sei es drum.

    Dieses ist in der aktuellen PHP-Datei "verfügbar". Nun soll per JS/jQuery bei Klick auf ein div-Element eine Liste mit den Statistikwerten des Spielers ausgegeben werden, dessen Key der Element-ID entspricht.

    Und da fällt dir grad nicht ein, wie man auf Eigenschaften eines Objekts in Javascript zugreift? Dein so genanntes mehrdimensionales Array ist nämlich nun gar keins mehr, sondern ein Objekt, dessen Eigenschaften teilweise auch wieder Objekte sind.

    Jedenfalls kann man auf Eigenschaften über foo.bar oder auch foo['bar'] zugreifen.

      		$(json.pkt).each(function(index, item) {
    

    Das ergibt keinen Sinn. json.pkt ist kein Element aus dem DOM-Baum, es zu einem jQuery-Objekt zu machen, das für die Manipulation von solchen Elementen vorgesehen ist, bringt keinen Nutzen. Schau dir aber mal mit console.log($(json.pkt)) in der Browser-Konsole an, was dabei rauskommt: ein Array mit einem Element drin, nämlich json.pkt.

    Und wenn du schon in den Entwicklerwerkzeugen bist, tipp mal json. ein und schau dir an, was dir die Autovervollständigung vorschlägt. Dann berücksichtige das eben genannte zur alternativen Zugriffsweise auf Objekt-Eigenschaften und dein Problem sollte hoffentlich keins mehr sein.

    dedlfix.

    1. Hallo dedlfix,

      vielen Dank für deine Antwort. Ich komme damit wohl erstmal weiter; jedoch nicht ohne mich weiter einzulesen.

      Werde mich nachher noch melden, ob es geklappt hat, wollte aber zeitnah zumindest ein Dankeschön loswerden.

      FG Alex