How to put an if within append Javascript

0

I made a javascript to mount a card and fill with information from a json, I need to check if there is an image in the indexes of the json array so that if I do not have it I can set a default image, but I can not use if inside apprend to do this verification.

$(function(){

    carregar(0, 3, 'Chamadas/listarAnuncios.php');
    $(document).on('click', '#carregarMais',function(){  

        var init = (jQuery('.anunciosJson').length);
        carregar(init, 3, 'Chamadas/listarAnuncios.php')
    });
    function carregar(init, max, url){
        var dados = { init : init, max : max };
       if(init >= 3)
        {
            $('#img_loadBuscarAnuncio').fadeIn('slow');
        }
        $('#cardContainer').css("opacity", 0.4);

        $.post(url, dados, function (data) {
            $("#carregarMais").last().remove();
            $('#img_loadBuscarAnuncio').fadeOut('slow');
            $('#cardContainer').css("opacity", 1.0);

            for(i = 0; i < data.dados.length; i++){
                $("#cardAnuncios").append('<div class="anunciosJson">'
                +'<a style="display: block; color: rgba(0,0,0,0.87);" href="#">'
                     +'<div style="box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); overflow: hidden; margin-bottom: 6px;">'  
                         +'<div class="col s4 m4" style="padding: 0px; margin: 0px;">'
                            +'<div style="width: 100%; overflow: hidden;">'
                                +'<div style="display: inline-block; position: relative; right: -50%;">'
                                // O if seria AQUI  __________----_____
                                     +'<img src="img/anuncios/'+data.dados[i].img+'" alt="user background" style="height: 150px; width: auto; position: relative; left: -50%; vertical-align: bottom;">'
                                 +'</div>'
                             +'</div>'
                         +'</div>'
                         +'<div class="col s8 m8 truncate-text" style="padding-left: 14px; padding-top: 8px; height: 150px;">'
                                 +'<span class="grey-text text-darken-4" style="font-size: 20px;">'+data.dados[i].nm_titulo+'</span>'
                                +'<br>'
                                +'<span class="grey-text">Anúncio criado por: '+data[i].nm_usuarios+' em '+data.dados[i].dt_criacao+'</span>'
                                +'<div class="star-result" style="margin-bottom: -10px;">'
                                     +'<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">'
                                     +'<style>'
                                         +'.checked {'
                                             +'color: orange;'
                                        +'}'
                                   +'</style>'
                                    +'<span class="fa fa-star checked"></span>'
                                     +'<span class="fa fa-star checked"></span>'
                                     +'<span class="fa fa-star checked"></span>'
                                     +'<span class="fa fa-star"></span>'
                                     +'<span class="fa fa-star"></span>'
                                 +'</div>'
                                 +'<br>'
                                 +'<i class="mdi-image-navigate-next cyan-text text-darken-2"></i>'
                                 +'<span class="cyan-text text-darken-2">Informática</span>'
                                 +'<br>'
                                 +'<i class="mdi-communication-location-on cyan-text text-darken-2"></i>'
                                +'<span class="cyan-text text-darken-2">Encruzilhada, Santos - São Paulo</span>'
                         +'</div>'
                     +'</div>'
                 +'</a>'
                 +'</div>');
            }
            console.info(data);
            $("#cardAnuncios").append('<button id="carregarMais" class="btn right" style="background-color: #0097a7;" type="submit" name="action"><center>Carregar mais</center></button>');
            $('#img_loadBuscarAnuncio').fadeOut('slow');
            $('#cardContainer').css("opacity", 1,0);
            var conta = $('<div class="anunciosJson">').length;

            if(init == max)
            {
            $("#carregarMais").last().remove();
            $('#img_loadBuscarAnuncio').fadeOut('slow');
            $('#cardContainer').css("opacity", 1.0);
            }

            if(conta == data.totalResults) {
                $("#carregarMais").hide();
            }

        }, "json");
    }

});
    
asked by anonymous 19.10.2018 / 15:28

1 answer

0

Good morning, my friend, try the following:

var imgTeste = data.dados[i].img ? data.dados[i].img : "caminho/imagem.jpg";

 $("#cardAnuncios").append('<div class="anunciosJson">'
                +'<a style="display: block; color: rgba(0,0,0,0.87);" href="#">'
                     +'<div style="box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); overflow: hidden; margin-bottom: 6px;">'  
                         +'<div class="col s4 m4" style="padding: 0px; margin: 0px;">'
                            +'<div style="width: 100%; overflow: hidden;">'
                                +'<div style="display: inline-block; position: relative; right: -50%;">'
                                     +'<img src="img/anuncios/'+imgTeste+'" alt="user background" style="height: 150px; width: auto; position: relative; left: -50%; vertical-align: bottom;">'
                                 +'</div>'
                             +'</div>'
                         +'</div>'
                         +'<div class="col s8 m8 truncate-text" style="padding-left: 14px; padding-top: 8px; height: 150px;">'
                                 +'<span class="grey-text text-darken-4" style="font-size: 20px;">'+data.dados[i].nm_titulo+'</span>'
                                +'<br>'
                                +'<span class="grey-text">Anúncio criado por: '+data[i].nm_usuarios+' em '+data.dados[i].dt_criacao+'</span>'
                                +'<div class="star-result" style="margin-bottom: -10px;">'
                                     +'<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">'
                                     +'<style>'
                                         +'.checked {'
                                             +'color: orange;'
                                        +'}'
                                   +'</style>'
                                    +'<span class="fa fa-star checked"></span>'
                                     +'<span class="fa fa-star checked"></span>'
                                     +'<span class="fa fa-star checked"></span>'
                                     +'<span class="fa fa-star"></span>'
                                     +'<span class="fa fa-star"></span>'
                                 +'</div>'
                                 +'<br>'
                                 +'<i class="mdi-image-navigate-next cyan-text text-darken-2"></i>'
                                 +'<span class="cyan-text text-darken-2">Informática</span>'
                                 +'<br>'
                                 +'<i class="mdi-communication-location-on cyan-text text-darken-2"></i>'
                                +'<span class="cyan-text text-darken-2">Encruzilhada, Santos - São Paulo</span>'
                         +'</div>'
                     +'</div>'
                 +'</a>'
                 +'</div>');

In this way you test if there is an image, and only assign the path of your default image if it does not exist, you do not need to change almost anything in what you already have.

I hope I have helped!

    
19.10.2018 / 15:38