Let’s say you want to make a web page that displays images for all records with the word 'pelagic' in their text. Below is a script that will do the work:
var url = "v1/records?communities=biosyslit&type=image&summary=false&images=true&q=nymphalidae&size=30";
var x = new XMLHttpRequest();
x.onload = function(event) {
if (x.readyState === 4) {
if (x.status === 200) {
var html = "";
if (x.responseText) {
var res = JSON.parse(x.responseText);
for (var record in res) {
html += "<figure>";
var images = res[record];
var j = images.length;
for (var i = 0; i < j; i++) {
html += `<img src='${images[i]}'>`;
}
html += `<figcaption>
rec ID: <a href='https://zenodo.org/record/${record.split('/').pop()} target='_blank'>
${record.split('/').pop()}</a>
</figcaption>
</figure>`;
}
var imageDiv = document.getElementById('images');
imageDiv.innerHTML = html;
event.preventDefault();
event.stopPropagation();
return false;
}
else {
html += "nothing found";
}
}
}
};
x.onerror = function(e) {
console.error(x.statusText);
};
x.open("GET", url, true);
x.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
x.send();