0

fiz um javascript para montar um card e preencher com informações de um json, preciso verificar se existe imagem nos índices do array json para que caso não tenha eu consiga setar uma imagem padrão, mas não estou conseguindo usar o if dentro do apprend para fazer essa verificação.

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

});
1
  • não seria algo como +(data.dados[i].img !=null) ? data.dados[i].img : "outraimagem.jpg"? Commented 19/10/2018 às 13:31

1 Resposta 1

0

Bom dia amigo: tente o seguinte:

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

Desta forma você testa se existe imagem, e só atribui o caminho da sua imagem "default" caso ela não exista, não precisando alterar quase nada no que você já tem pronto.

Espero ter ajudado!

1
  • vlw amigo funcionou perfeita mente :D
    – Reignomo
    Commented 19/10/2018 às 13:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .