3

Estou recebendo via JSON um array, percorro ele com o .each() do JQUERY, assim monto minha html, e a coloco em uma div dentro de minha página. Dito tudo isto e feito isto:

$.getJSON('http://localhost:8000/produtos', function(data) {
        $('#todosProdutos').html('');
        $.each(data, function (key, item) {
            var ANTIGO = $('#todosProdutos').html();

            var html = ANTIGO + '<div class="item">'
                    +'<div class="product">'
                    +'<div class="flip-container">'
                    +'<div class="flipper">'
                    +'<div class="front">'
                    +'<a href="detail">'
                    +'<img src="img/product1.jpg" alt="" class="img-responsive">'
                    +'</a>'
                    +'</div>'
                    +'<div class="back">'
                    +'<a href="detail">'
                    +'<img src="img/product1_2.jpg" alt="" class="img-responsive">'
                    +'</a>'
                    +'</div>'
                    +'</div>'
                    +'</div>'
                    +'<a href="detail" class="invisible">'
                    +'<img src="img/product1.jpg" alt="" class="img-responsive">'
                    +'</a>'
                    +'<div class="text">'
                    +'<h3><a href="detail">Fur coat with very but very very long name</a></h3>'
                    +'<p class="price">$143.00</p>'
                    +'</div>'
                    +'<!-- /.text -->'
                    +'</div>'
                    +'<!-- /.product -->'
                    +'</div>';
        });
        console.log(html);
        $('#todosProdutos').html(html);
        console.log(data);
    });

Quando dei o console.log(html) fala que a váriavel não esta definidade, isto sei o problema, é devido ao escopo de variavel, porém tentei colocar o .html() dentro do .each() e também não tive sucesso, aparece meu html, porém não coloca na página.

Onde pode estar meu erro ? E Qual a melhor maneira de fazer isto ?

Meu console.log(data):

console.log(data) div com apenas um produto meu array data

3
  • Então @RenanRodrigues, está chegando valores de data que são 4 itens dentro do array e o html tem valores? na página não aparece pelo menos o html com as informações fixas que você colocou?
    – novic
    10/10/2016 às 14:24
  • O que acontece e que estou fazendo um teste para saber se ele vai colocar os itens na tela, com valores fixo, sei que está chegando os dados corretamente agora o problema é na tela. 10/10/2016 às 14:27
  • não sei bem, fiz uma edição, seu html estava errado! dá uma olhada ve se aparece como você mesmo disse 4 itens fixos (porque ela vai rodar 4 vezes se estiver certo).
    – novic
    10/10/2016 às 14:28

1 Resposta 1

2

Um simples ajuste:

No $.each não é só data é data.produtos pela forma de envio, então,

$.each(data.produtos ...

Segue código completo:

$.getJSON('http://localhost:8000/produtos', function(data) {
        $('#todosProdutos').html('');
        var html = "";
        $.each(data.produtos, function (key, item) 
        {
            html = html + '<div class="item">';
            html = html + '<div class="product">';
            html = html + '<div class="flip-container">';
            html = html + '<div class="flipper">';
            html = html + '<div class="front">';
            html = html + '<a href="detail">';
            html = html + '<img src="img/product1.jpg" alt="" class="img-responsive">';
            html = html + '</a>';
            html = html + '</div>';
            html = html + '<div class="back">';
            html = html + '<a href="detail">';
            html = html + '<img src="img/product1_2.jpg" alt="" class="img-responsive">';
            html = html + '</a>';
            html = html + '</div>';
            html = html + '</div>';
            html = html + '</div>';
            html = html + '<a href="detail" class="invisible">';
            html = html + '<img src="img/product1.jpg" alt="" class="img-responsive">';
            html = html + '</a>';
            html = html + '<div class="text">';
            html = html + '<h3><a href="detail">Fur coat with very but very very long name</a></h3>';
            html = html + '<p class="price">$143.00</p>';
            html = html + '</div>';
            html = html + '</div>';                    
            html = html + '</div>';
        });
        console.log(html);
        $('#todosProdutos').html(html);
        console.log(data);
});

Me parece que seu código de valores (item) não está sendo colocado, mas, o problema relatado com esse simples ajuste vai funcionar.

9
  • Irmao realmente ainda não está colocando o html na página 10/10/2016 às 14:17
  • 1
    Tem que ver se realmente está chegando alto em data está chegando algo? tem como colar o resultado na sua pergunta?
    – novic
    10/10/2016 às 14:18
  • 1
    Sim so um minuto 10/10/2016 às 14:19
  • Atualizei minha pergunta 10/10/2016 às 14:22
  • O estranho é que aparece apenas um item, além do mais ele so aparece quando inspeciono elemento, pois no site mesmo não está o problema, 10/10/2016 às 14:34

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 .