This is my first time using this site, but I have exhausted most of my resources trying to find an answer. I'm teaching myself how to program and I'm stuck on my first API project.
As the overall goal, I wanted to make a web site that allows you to enter specific criteria and search through all of imgur's wallpapers. Just for the sake of having an API project on my portfolio.
To reach this goal I have set out to just pull the images from the gallery that fit the criteria of my search. After all if I can search the images successfully then I can narrow it down to the specifics of my overall goal.
This is where I run into an issue though. I'm able to get all the links from the API but this includes the album links, which will break because they aren't really images just a repository for them.
I have been trying to pull both gallery images, and album images, or just one and then the other but I seem to have hit a wall. Included below is a link that shows not only my code but a sample of their JSON data as well as results from a console.log I did showing the results of the search.
In addition, I have included my codepen for this project in case you want to play with it there.
Thank you 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');
//captures searchfield value
var tagValue = $searchField.val();
var queryURL = "https://api.imgur.com/3/gallery/search/{{sort}}/{{window}}/{{page}}?q_type=jpg&q=" + tagValue + "";
//Settings for Request
var settings = {
"async": true,
"crossDomain": true,
"url": queryURL,
"method": "GET",
"headers": {
"authorization": "Client-ID 65a5c1418e8d1fb"
}
}
//Retrieving data from Ajax
$.ajax(settings).done(function(response) {
var photoHTML = '<ul>';
//Loop through JSON data
$.each(response.data, function(i, images) {
photoHTML += '<li>';
photoHTML += '<img src="' + images.link + '"></li>';
}); // end each
photoHTML += '</ul>';
$('#autoGallery').html(photoHTML);
console.log(photoHTML);
});
});
});