JSFiddle - React, Tailwind, and code Playground

by mattography

JavaScript

$.ajax({
    url: url,
    method: 'GET',
    headers: {
        "Authorization": bearerToken
    },
}).then(function (response, responseText, jqXHR) {
    var obj = response;
    $("#imageid").css("border-color", "#ccc");
    $(".search-results").empty();
    for (var property in obj.entity.entries) {
        if (obj.entity.entries.hasOwnProperty(property)) {
            if (obj.entity.entries[property].orientation == 'PORTRAIT') {
                var imageURI = obj.entity.entries[property].uri + "?" + imageCacheBust;
                $(".search-results").append($("<li><a href='" + imageURI + "' target='_blank'><div class='thumbnail'><img width='30' height='30' src='" + imageURI + "' target='_blank'/></img><div class='caption'><p>" + obj.entity.entries[property].orientation + "</p></div></a></li>"));
            } else {
                var imageURI = obj.entity.entries[property].uri + "&" + imageCacheBust;
                $(".search-results").append($("<li><a href='" + imageURI + "' target='_blank'><div class='thumbnail'><img width='30' height='30' src='" + imageURI + "' target='_blank'/></img><div class='caption'><p>" + obj.entity.entries[property].orientation + "</p></div></a></li>"));
            }
        }
    }
    if (jqXHR.status == 204) {
        $(".search-results").append("<p class='alert alert-info'>Asset is loaded, but has no photos yet.</p>");
    }
}).fail(function (data) {
    $(".search-results").empty();
    $(".search-results").append("<p class='alert alert-danger'>Invalid ID</p>");
    $("#imageid").css("border-color", "red");
});