Webdatenbanken

Wiki-Quelltext dieser Seite.

<language>Javascript</language>
<code id="5b1e8ed6f0383" hidden>[[PixabayAPI|code]]</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.

<code id="5b1e98647eeeb">
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);
  }
}
</code>
<run id="5b1e98647efcc">
$('#bilderAusgabe').html(""); // Anzeigefeld leeren

pixabaySuche("Ente",bilderAnzeigen);
</run>

<html>
<style>
#bilderAusgabe > img {
  height:100px;
}
</style>
<div style="padding:8px;border:1px solid #ccc">
<div>#bilderAusgabe</div>
<div id="bilderAusgabe">
</div>
</div>
</html>

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

<code id="5b1e98647ef57">
function bilderDetailsAnzeigen(bilder){
  for(var i=0; i < bilder.hits.length; 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);
  }
}
</code>
<run id="5b1e98647f02c">
$('#bilderAusgabeDetail').html(""); // Anzeigefeld leeren

pixabaySuche("Ente",bilderDetailsAnzeigen);
</run>

<html>
<div style="padding:8px;border:1px solid #ccc">
<div>#bilderAusgabeDetail</div>
<div id="bilderAusgabeDetail">
</div>
</div>
</html>