Positionsbestimmung - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 223

Außerdem wollen Sie aber noch eine Liste der Restaurants mit einem kleinen Karten-
ausschnitt anlegen. Dazu müssen Sie zunächst im HTML-Code ein Platzhalterele-
ment anlegen:

<section id="uebersicht">
<h2>Restaurants in der N&auml;he</h2>
<ul>
<!-- Wird dynamisch befüllt -->
</ul>
</section>

5

Ähnlich wie bei der Karte legen Sie ein Element vom Typ section an, dem Sie eine
Überschrift und eine leere, unsortierte Liste spendieren. Hier werden nun per jQuery
die Restaurants eingetragen:

$('#uebersicht').find('ul').append('<li class="'+daten.Kategorie+'">'
+restaurant+'</li>');

Sie fügen also der leeren Liste pro vorhandenem JSON-Eintrag ein li -Element mit
dem Restaurantnamen und einem class -Attribut an, in dem die Restaurantkategorie
gespeichert ist (Abbildung 5.16).

Abbildung 5.16 Unformatierte Restaurantliste, aus der JSON-Datei geladen