Examples

Web page with images

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();