Webdatenbanken

Aus ProgrammingWiki

Archivierte Version vom 2018-06-11T18:49:07+00:00. Aktuelle Version

Inhaltsverzeichnis

1 Bildersuche mit Pixabay.com
2 Videos suchen mit Pixabay.com
3 Videosuche mit YouTube
4 Wetterdaten mit OpenWeatherMap.org

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 url = videos.hits[i].videos["tiny"].url;
    var video = $('<video style="height:100px" src="'+url+'" controls></video>');
    $('#videosAusgabe').append(video);
  }
}

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

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

#videosAusgabe

Videosuche mit YouTube

function youtubeAnzeigen (videos){
  for(var i=0; i < videos.items.length; i++){
    var url = 'https://www.youtube.com/embed/'+videos.items[i].id.videoId;
    var video = $('<iframe src="'+url+'" width="320" height="240" src="" frameborder="1" allowfullscreen></iframe');
    $('#youtubeAusgabe').append(video);
  }
}

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

youtubeAPI("search","Enten",youtubeAnzeigen);

#youtubeAusgabe

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

Inhaltsverzeichnis

Bildersuche mit Pixabay.com

Videos suchen mit Pixabay.com

Videosuche mit YouTube

Wetterdaten mit OpenWeatherMap.org

Suche