Webdatenbanken

Wiki-Quelltext dieser Seite.

<language>Javascript</language>
<code id="5b1e8ed6f0383" hidden>
var KEY = "9258151-9b5330066ed2372ad80530c44";
function pixabaySuche(q,callback){
  var r = localStorage.getItem("PBC_"+q);
  if(r) { callback(JSON.parse(r)); return;}
  $.getJSON("https://pixabay.com/api?key="+KEY+"&q="+encodeURIComponent(q),function(results){
    localStorage.setItem("PBC_"+q,JSON.stringify(results));
    callback(results);
  });
}
</code>

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 [https://pixabay.com/api/docs/ Dokumentation] von Pixabay kannst du mehr erfahren.

<run id="5b1e8ed6f03f3">
$('#bilderAusgabe').html(""); // löschen

pixabaySuche("Ente",function(bilder){
  for(var i=0; i < bilder.hits.length; i++){
    var img = document.createElement("img");
    img.src = bilder.hits[i].largeImageURL;
    $('#bilderAusgabe').append(img);
  }
});
</run>

<html>
<style>
#bilderAusgabe > img {
  height:100px;
}
</style>
<div id="bilderAusgabe">
</div>
</html>

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

<run id="5b1e934718198">
$('#bilderAusgabeDetail').html(""); // löschen

pixabaySuche("Ente",function(bilder){
  for(var i=0; i < bilder.hits.length; i++){
    var bild = $('<div style="display:flex"><img style="width:200px"><div><b>Bildeigenschaften:</b><br><table></table></div></div>');
    $("img",bild).attr("src",bilder.hits[i].largeImageURL); // bild zum img zuweisen
    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);
  }
});
</run>

<html>
<div id="bilderAusgabeDetail">
</div>
</html>