WebApps mit Frameworks entwickeln - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 315

$.each(data.gerichte, function(i,item){
// Überprüfen des Gerichtnamens mit dem aus dem sessionStorage.
if(item.name == gericht){
$('<img src="bilder/'+item.bild+'" /><h3>' + item.name + '</h3>' + '<p>'
+ item.untertitel + '</p>').appendTo('#gericht-inhalt');
}
});
});
});
</script>

8

Listing 8.14 Das Auslesen der JSON-Datei, der Abgleich mit der sessionStorage und letzt-
endlich die Ausgabe des gewählten Gerichts

Zunächst leeren Sie auch hier den Inhalt des Containers, in dem das Gericht letztend-
lich ausgegeben werden soll. Dadurch entstehen keine Dopplungen.

$('#gericht-inhalt').empty();

Im nächsten Schritt speichern Sie den Inhalt der sessionStorage -Variablen gericht in
einer JavaScript-Variablen mit gleichem Namen.

var gericht = sessionStorage.gericht;

Als Nächstes lesen Sie analog zur Menüliste die JSON-Datei aus. Innerhalb des Ausle-
sens jedes Elements überprüfen Sie dann, ob der ausgelesene Titel mit dem Titel der
Variablen gericht , die letztendlich von der Menüseite über den sessionStorage über-
geben wurde, übereinstimmt.

if(item.name == gericht){
};

Ist dies der Fall, so lassen Sie, wie gewohnt, die Inhalte in bestimmte Teile des HTML-
Codes einpflegen und letztendlich dem Container mit der id gericht-inhalt hinzu-
fügen.

$('<img src="bilder/'+item.bild+'" class="schatten"/><h3>' + item.name +
'</h3>' + '<p>' + item.untertitel + '</p>').appendTo('#gericht-inhalt');

Fertig. So einfach ist das, und Sie benötigen nicht für jedes neue Gericht eine einzelne
Detailseite (Abbildung 8.11).