How to put an if inside the Javascript append

Asked

Viewed 212 times

0

I made a javascript to assemble 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 don’t have it I can set a default image, but I’m not able to use if inside apprend to do this check.

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

});
  • wouldn’t be something like +(data.dados[i].img !=null) ? data.dados[i].img : "outraimagem.jpg"?

1 answer

0


Good morning 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>');

This way you test if there is an image, and only assign the path of your image "default" if it does not exist, not needing to change almost anything in what you already have ready.

I hope I’ve helped!

  • vlw friend worked perfectly mind :D

Browser other questions tagged

You are not signed in. Login or sign up in order to post.