Navigation

    ask avan logo
    • Register
    • Login
    • Search
    • Categories
    • Unsolved
    • Solved

    How to make a Search API call to Unsplash Using jQuery

    Javascript + jQuery
    2
    8
    51
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • A
      Abdullah last edited by avan

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

      Reply Quote 1
        1 Reply Last reply

      • A
        Abdullah last edited by @avan

        @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");
        }
        })
        })

        Reply Quote 0
          1 Reply Last reply

        • avan
          avan last edited by

          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.

          Reply Quote 0
            A 1 Reply Last reply

          • A
            Abdullah last edited by @avan

            @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.

            Reply Quote 1
              1 Reply Last reply

            • avan
              avan last edited by

              @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.

              Reply Quote 0
                A 1 Reply Last reply

              • A
                Abdullah last edited by @avan

                @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");
                }
                })
                })

                Reply Quote 0
                  1 Reply Last reply

                • avan
                  avan last edited by

                  Glad you figured it out. Cheers.

                  Reply Quote 1
                    1 Reply Last reply

                  • avan
                    avan last edited by

                    @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!

                    Reply Quote 1
                      A 1 Reply Last reply

                    • A
                      Abdullah last edited by @avan

                      @avan thanks and sure 💯💯👍

                      Reply Quote 1
                        1 Reply Last reply

                      • First post
                        Last post