无法将if / else语句合并到JSON响应中

Question

Pulling data from a API and displaying IMG's from it.

I'm trying to incorporate a if/else statement that essentially display's photos if the search term has data from the response, and if it doesn't then display text saying no results.

Currently it displays the photos if there is a JSON result, but still doesn't display text/consolelog if there isn't. I don't understand why it isn't hitting the else statement.

Here is the code. I can't do a codepen since it will have my API key. Is there something obvious I'm not seeing? This should be so simple and easy to do, yet I can't.

// Search for Photos

$('form').submit(function (e) {
    e.preventDefault();
    // API Calls
    let input = document.getElementById("search").value;
    let $submitButton = $('#submit');
    let searchPhoto = API + 'search/photos?' + client_id + '&page=1&query=' + input;

    // Ajax part
    $.getJSON(searchPhoto, function (response) {

        // Create beginning of Bootstrap card
        let photoHTML = '<div class="col-12 col-sm-12">';

        if (response.length !== 0) {
        // Loop over each response photo, putting it into a unique card
        $.each(response.results, function (i, photo) {
            // Card background
            let photoBackground = photo.urls.regular;
            // Download link
            let download = photo.links.download + "?force=true";

            // Create a link to be clicked by the download button
            link = document.createElement('a');
            link.href = download;
            link.download = 'Download.jpg';   // The file name suggestion for the user.
            document.body.appendChild(link);

            // Add each card element 
            photoHTML += '<article class="card animated fadeInLeft text-center">';
            photoHTML += '<img class="card-img-top img-responsive preview" src=' + photoBackground + '/>';
            photoHTML += '<div class="card-block">';
            photoHTML += '<h4 class="card-title" id="randomTitle"></h4>';
            photoHTML += '<button type="button"  class="btn btn-outline-primary common_class" name='+download+' id="div' + i + '">Download</button>'; // Create unique ID
            photoHTML += '</article>';

        })
        } else {
            photoHTML += '<p>Sorry dude, please work.</p>';
        }


        // End Card
        photoHTML += '</div>';
        // Put each card into a div
        $('#testing').html(photoHTML);

        let currently_clicked_id = '';
        let myID = $(document).on('click', '.common_class', function () {
            currently_clicked_id = $(this).attr('id');
            return currently_clicked_id;
        });



        $('.common_class').click(function (e) {
            // Call download link
            // console.log(e.target.id);
            console.log(e.target.name);
            link.href = e.target.name;
            link.click();
        });


    })

Answer 1

My guess would be response is not empty. Since you are just looping response.results, i suggest you can use condition if(response.results !== undefined && response.results.length > 0)