Question

从API中提取数据并从中显示IMG。

我试图合并if / else语句，如果搜索字词包含来自响应的数据，那么它实际上会显示照片，如果它没有显示没有结果的文字。< / p>

目前，如果有JSON结果，它会显示照片，但如果没有，则仍然无法显示文本/控制台日志。我不明白为什么它没有发出其他声明。

这是代码。我不能做一个codepen，因为它有我的API密钥。我有没有看到明显的东西？这应该是如此简单易行，但我不能。

// 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

我的猜测是response不是空的。由于您只是循环response.results，我建议您可以使用条件if(response.results !== undefined && response.results.length > 0)

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

1 个答案: