This is my first time using this site, but I have exhausted most of my resources trying to find the answer. I teach how to program, and I am stuck in my first API project.
As a general goal, I wanted to create a website that allows you to enter specific criteria and search through all imgur wallpapers. Just for the sake of the API project in my portfolio.
To achieve this, I decided to simply pull out images from the gallery that match my search criteria. In the end, if I can successfully search for images, I can narrow it down to the specifics of my common goal.
This is where I ran into the problem. I can get all the links from the API, but this includes album links that will be broken because they are not images, just a repository for them.
I'm trying to pull out both gallery images and album images, or just one and then the other, but I seem to hit a wall. Below is a link that shows not only my code, but also a sample of JSON data, as well as results from console.log. I showed search results.
https://w.trhou.se/p4zeovouz5
In addition, I have included my code for this project if you want to play with it.
Thanks for any help you can provide.
https://codepen.io/digitalvillainy/pen/xLdGyq?editors=0011
$(document).ready(function(){
$('form').submit(function(evt){
evt.preventDefault();
var $searchField = $('#Search');
var $submitButton = $('#Submit');
var tagValue = $searchField.val();
var queryURL = "https://api.imgur.com/3/gallery/search/{{sort}}/{{window}}/{{page}}?q_type=jpg&q=" + tagValue + "";
var settings = {
"async": true,
"crossDomain": true,
"url": queryURL,
"method": "GET",
"headers": {
"authorization": "Client-ID 65a5c1418e8d1fb"
}
}
$.ajax(settings).done(function (response) {
var photoHTML = '<ul>';
$.each(response.data,function(i,images) {
photoHTML += '<li>';
photoHTML += '<img src="' + images.link + '"></li>';
});
photoHTML += '</ul>';
$('#autoGallery').html(photoHTML);
console.log(photoHTML);
});
});
});