Webdatenbanken

Aus ProgrammingWiki

Archivierte Version vom 2018-06-11T18:09:01+00:00. Aktuelle Version

Bildersuche mit Pixabay.com

Dieses Beispiel verwendet die Pixabay.com API, um nach Bildern zu suchen. Du kannst beliebige Suchbegriffe statt "Ente" eingeben. Die Funktion liefert ein JavaScript-Objekt mit einer Liste von "hits" zurück. In der Dokumentation von Pixabay kannst du mehr erfahren.

function bilderAnzeigen (bilder){
  for(var i=0; i < bilder.hits.length; i++){
    var bild = $('<img style="height:100px" src="'+bilder.hits[i].largeImageURL+'">');
    $('#bilderAusgabe').append(bild);
  }
}

$('#bilderAusgabe').html(""); // Anzeigefeld leeren

pixabayAPI("images","Ente",bilderAnzeigen);

#bilderAusgabe

Im vorherigen Beispiel wurden einfach alle gefundenen Bilder nebeneinander als img Elemente gelegt. Diesmal sollen detaillierte Informationen zu jedem Bild angezeigt werden:

function bilderDetailsAnzeigen(bilder){
  for(var i=0; i < bilder.hits.length && i < 3; i++){
    var bild = $('<div style="margin:1em;border:1px solid blue;padding:8px">'+
                 '  <img style="height:200px" src="'+bilder.hits[i].largeImageURL+'">'+
                 '  <table></table>'+
                 '</div>');

    // alle Eigenschaften auflisten, die Pixbay liefert
    for(var p in bilder.hits[i]){
      $("table",bild).append($('<tr><td><b>'+p+':</b></td><td>'+bilder.hits[i][p]+'</td></tr>'));
    }
    $('#bilderAusgabeDetail').append(bild);
  }
}

$('#bilderAusgabeDetail').html(""); // Anzeigefeld leeren

pixabayAPI("images","Ente",bilderDetailsAnzeigen);

#bilderAusgabeDetail

Videos suchen mit Pixabay.com

function videosAnzeigen (videos){
  for(var i=0; i < videos.hits.length; i++){
    var video = $('<video style="height:100px" src="'+videos.hits[i].videoURL+'" controls></video>');
    $('#videosAusgabe').append(video);
  }
}

$('#videosAusgabe').html(""); // Anzeigefeld leeren

pixabayAPI("videos","Enten",videosAnzeigen);

#videosAusgabe

Wetterdaten mit OpenWeatherMap.org

Dieses Beispiel verwendet die OpenWeatherMap.org API, um das aktuelle Wetter von einem Ort zu bestimmen. Du kannst beliebige Suchbegriffe statt "Bern" eingeben. In der Dokumentation von OpenWeatherMap kannst du mehr erfahren.

function temeraturAnzeigen(wetter){
  var tabelle = $('<table></table>');

  // alle Eigenschaften auflisten, die OpenWeatherMap liefert
  for(var p in wetter.main){
    tabelle.append($('<tr><td><b>'+p+':</b></td><td>'+wetter.main[p]+'</td></tr>'));
  }
  var sonnenuntergang = new Date(wetter.sys.sunset*1000);
  tabelle.append('<tr><td><b>Sonnenuntergang</b><td><td>'+sonnenuntergang+'</td></tr>')

  $('#temperaturAusgabe').append(tabelle);
}

$('#temperaturAusgabe').html(""); // Anzeigefeld leeren

openweathermapAPI ("weather","Bern, CH", temeraturAnzeigen);

#temperaturAusgabe

function vorhersageAnzeigen(wetter){
console.log(wetter)

  // alle Eigenschaften auflisten, die OpenWeatherMap liefert
  for(var i=0; i < wetter.list.length; i++){
    var datum = new Date(wetter.list[i].dt*1000);
    var tag = $('<div><b>'+datum+':</b> '+wetter.list[i].main.temp+' °C </div>');
    $('#vorhersageAusgabe').append(tag);
  }
}

$('#vorhersageAusgabe').html(""); // Anzeigefeld leeren

openweathermapAPI ("forecast","Bern, CH", vorhersageAnzeigen);

#vorhersageAusgabe

Webdatenbanken

Bildersuche mit Pixabay.com

Videos suchen mit Pixabay.com

Wetterdaten mit OpenWeatherMap.org

Suche