Imgur API GET image problems

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

  //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);
      });
   });
});
+4
source share

Source: https://habr.com/ru/post/1684403/


All Articles