How to make a Search API call to Unsplash Using jQuery

Abdullah

hello everyone , this is my current code and i will like to know how create a search that allows user to be able to search any keyword and when that key word is searched the api responds with the result and displays that specific word that was search

$(document).ready(function () {
$(".inoutForSearchingAPi").keyup(function () {
$(".layerforPic").html("");
var searchField = $(this).val();
$.getJSON('https://api.unsplash.com/search/photos?client_id= my api key', function (data) {
searchField.each(data, function (index, value) {
console.log(data);
var userPersonName = value.user.name;
var timeImage = value.user.updated_at;
var theImagesUrl = value.urls.regular;
$(".layerforPic").append('<li class="layerforPicLi"><div class="galleryImagesAwesomeFitLayer"><img class = "galleryImagesAwesome"src = "' + theImagesUrl + '" download></div><div class = "aboutGalleryLayerUser"><span class = "usernamerPictureSection">' + userPersonName + '</span><spand > Great moment in Dubai <div class ="daypostedpictureSection">' + timeImage + '</div></spand></div><img class ="sendPictureTOFriendSection" src ="img/icons8-paper-plane-64.png"><img class ="DownloadPictureFriendSection"src ="img/icons8-downloading-updates-64.png"><div class ="peopletosendtopictureSection"style ="display: none;"><ul class ="suggestedPeopleToSend"><li> Ibrahim </li><li> Abbas </li><li> imran</li><li> fatimah </li><li> Zainab </li><li> Ibrahim </li><li> Abbas </li><li> imran </li><li> fatimah </li><li> Zainab </li><li> Ibrahim </li><li> Abbas</li><li>imran </li><li> fatimah </li><li> Zainab </li></ul></div><div class ="downloadPictureLayer"><img class ="closedownloadPictureLayer" src ="img/icons8-multiply-64.png"><button class ="downloadPictureOutput"> Download </button></div ></li>');
});
});
});
});

Abdullah

@avan I want to say thanks very very much but i decided to read more document and re write it in a different way but with also your help i am really happy to have it working ,thanks a lot.

$(document).ready(function () {
$(".searchinoutForSearchingAPiBtn").click(function (e) {
e.preventDefault();
let searchInputwords = $(".inoutForSearchingAPi").val();
let urlApi = "https://api.unsplash.com/search/photos?q=" + searchInputwords + "&client_id=MY KEY &page=1&query=" + searchInputwords + "";
console.log(urlApi);
//making condition that will stop api not to give result if user licks seaerch without any input
if (searchInputwords !== "") {
$.ajax({
url: urlApi,
method: "GET",
dataType: "json",
photo_count: 24783,
beforeSend: function () {
$(".LoaderGallery").show();
},
complete: function () {
$(".LoaderGallery").hide();
},
//if successful run this
success: function (unsplashApi) {
console.log(unsplashApi);
let output = ""
let latestGalerySearchPic = unsplashApi.results;
for (var i in latestGalerySearchPic) {
output += <li class="layerforPicLi"><div class="galleryImagesAwesomeFitLayer"><img class = "galleryImagesAwesome"src = "${latestGalerySearchPic[i].urls.regular}"></div><div class = "aboutGalleryLayerUser"><span class = "usernamerPictureSection">${latestGalerySearchPic[i].user.name}</span><span class="imagedetailsCaption">${latestGalerySearchPic[i].alt_description}<div class ="daypostedpictureSection">${latestGalerySearchPic[i].user.updated_at}</div></span></div><img class ="sendPictureTOFriendSection" src ="img/icons8-paper-plane-64.png"><img class ="DownloadPictureFriendSection"src ="img/icons8-downloading-updates-64.png"><div class ="peopletosendtopictureSection"style ="display: none;"><ul class ="suggestedPeopleToSend"><li> Ibrahim </li><li> Abbas </li><li> imran</li><li> fatimah </li><li> Zainab </li><li> Ibrahim </li><li> Abbas </li><li> imran </li><li> fatimah </li><li> Zainab </li><li> Ibrahim </li><li> Abbas</li><li>imran </li><li> fatimah </li><li> Zainab </li></ul></div><div class ="downloadPictureLayer"><img class ="closedownloadPictureLayer" src ="img/icons8-multiply-64.png"><button class ="downloadPictureOutput"> Download </button></div ></li>;
}
if (output !== "") {
$(".layerforPic").html(output);
} else {
let imageNotFound = "No images available"
$(".layerforPic").html();
}
},
//if not run this function
error: function () {
console.log("you have an error");
}
})
} else {
console.log("please enter something");
alert("please enter something");
}
})
})

avan

Can you make sure searchField is set to what the user typed in inoutForSearchingAPi? Also, I am not seing where you are actually providing the search term to the unsplash search endpoint. All I see is 'https://api.unsplash.com/search/photos?client_id= my api key' but no search term.
Here is an example of how you could do a unsplash image search

fetch(`https://source.unsplash.com/1600x900/?beach`).then((response)=> { 
    <!-- use response object to retrieve image data -->   
    let item = document.createElement('div');
    item.classList.add('item');
    item.innerHTML = `
      <img class="beach-image" src="${response.url}" alt="beach image"/>
    `     
    document.body.appendChild(item);
  })

Here is where I got it from: https://dev.to/desi/using-the-unsplash-api-to-display-random-images-15co

Hope this helps a little.

Abdullah

@avan hello thanks for the help yes just made searchField to be set to what the user typed in inoutForSearchingAPi didn't notice that but the code you gave isn't jquery , i already did same thing with javascript before but now i want to try using jquery,if possible can show me how it can be done in jquery as i am still learning how to do things in jquery,thanks.

avan

@Abdullah Got you.
Here is the jQuery option:

$.getJSON("https://api.unsplash.com/search/photos?client_id=REPLACE_THIS_WITH_YOUR_CLIENT_ID&page=1&query=office",
   function(data) {
     // data is an array of objects. 
     console.log("Full image URL of the first image in the data set: " + data.results[0].urls.full);         
   });

Don't forget to replace the 'office' part in the url with your search term.
So it should look something like this: "https://api.unsplash.com/search/photos?client_id=REPLACE_THIS_WITH_YOUR_CLIENT_ID&page=1&query=" + searchField

Hope this works for you. Let me know if you have any other questions.

Abdullah

@avan I want to say thanks very very much but i decided to read more document and re write it in a different way but with also your help i am really happy to have it working ,thanks a lot.

$(document).ready(function () {
$(".searchinoutForSearchingAPiBtn").click(function (e) {
e.preventDefault();
let searchInputwords = $(".inoutForSearchingAPi").val();
let urlApi = "https://api.unsplash.com/search/photos?q=" + searchInputwords + "&client_id=MY KEY &page=1&query=" + searchInputwords + "";
console.log(urlApi);
//making condition that will stop api not to give result if user licks seaerch without any input
if (searchInputwords !== "") {
$.ajax({
url: urlApi,
method: "GET",
dataType: "json",
photo_count: 24783,
beforeSend: function () {
$(".LoaderGallery").show();
},
complete: function () {
$(".LoaderGallery").hide();
},
//if successful run this
success: function (unsplashApi) {
console.log(unsplashApi);
let output = ""
let latestGalerySearchPic = unsplashApi.results;
for (var i in latestGalerySearchPic) {
output += <li class="layerforPicLi"><div class="galleryImagesAwesomeFitLayer"><img class = "galleryImagesAwesome"src = "${latestGalerySearchPic[i].urls.regular}"></div><div class = "aboutGalleryLayerUser"><span class = "usernamerPictureSection">${latestGalerySearchPic[i].user.name}</span><span class="imagedetailsCaption">${latestGalerySearchPic[i].alt_description}<div class ="daypostedpictureSection">${latestGalerySearchPic[i].user.updated_at}</div></span></div><img class ="sendPictureTOFriendSection" src ="img/icons8-paper-plane-64.png"><img class ="DownloadPictureFriendSection"src ="img/icons8-downloading-updates-64.png"><div class ="peopletosendtopictureSection"style ="display: none;"><ul class ="suggestedPeopleToSend"><li> Ibrahim </li><li> Abbas </li><li> imran</li><li> fatimah </li><li> Zainab </li><li> Ibrahim </li><li> Abbas </li><li> imran </li><li> fatimah </li><li> Zainab </li><li> Ibrahim </li><li> Abbas</li><li>imran </li><li> fatimah </li><li> Zainab </li></ul></div><div class ="downloadPictureLayer"><img class ="closedownloadPictureLayer" src ="img/icons8-multiply-64.png"><button class ="downloadPictureOutput"> Download </button></div ></li>;
}
if (output !== "") {
$(".layerforPic").html(output);
} else {
let imageNotFound = "No images available"
$(".layerforPic").html();
}
},
//if not run this function
error: function () {
console.log("you have an error");
}
})
} else {
console.log("please enter something");
alert("please enter something");
}
})
})

avan

Glad you figured it out. Cheers.

avan

@Abdullah Do you mind selecting your last post as the official answer? It will help others who might be looking for similar help. Thank you!

Abdullah

@avan thanks and sure