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

Definieren Sie zunächst die globalen Variablen wetter und diagramm . Danach folgt der
JSONP-Request, der die Wetterdaten abruft:

var wetter, diagramm;
var wetterAbrufen = function(stadt){
Ext.util.JSONP.request({
url: 'http://free.worldweatheronline.com/feed/weather.ashx',
callbackKey: 'callback',
params: {
key: IHR_KEY,
q: stadt,
format: 'json',
num_of_days: 5
},
callback: function(result) {
wetterAnzeigen(result.data.weather);
}
});
};

8

Die Parameter werden als params -Objekt an die Funktion übergeben - dies ist wesent-
lich übersichtlicher als sie an die URL zu hängen. Die callback -Funktion wird ausge-
führt, wenn die Daten erfolgreich abgerufen wurden. Der Inhalt des JSON-Callbacks
wird in der Variable result übergeben. Da Sie aber ohnehin nur die Temperaturen
aus dem Unterobjekt weather benötigen, übergeben Sie nur diese an die Funktion
wetterVorbereiten .

Die Wetterdaten vorbereiten

Alle Daten im JSON-Objekt werden als Zeichenketten, also als Strings, übergeben. Für
die Darstellung im Diagramm müssen Sie diese nun noch in Ganzzahlen, also Integer ,
umrechnen:

var wetterAnzeigen = function(rohdaten) {
for(i = 0; i < rohdaten.length; i++) {
rohdaten[i].tempMaxC = parseInt(rohdaten[i].tempMaxC);
rohdaten[i].tempMinC = parseInt(rohdaten[i].tempMinC);
}
wetter = new Ext.data.JsonStore({
fields: ['date','tempMaxC','tempMinC'],
data: rohdaten