Problem with each jquery

3

I'm getting via JSON a array , I run it with .each() JQUERY , so I set my html, and put it in div within my page. Having said all this and done this:

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

When I give console.log(html) it says that the variable is not this definite, I know the problem, it is due to the variable scope, but I tried to put .html() inside .each() and also I was not successful, my html appears , but does not put it on the page.

Where can my mistake be? And what's the best way to do this?

My console.log(data) :

    
asked by anonymous 10.10.2016 / 14:47

1 answer

2

A simple adjustment:

No $.each is not only data is data.produtos by the way of submission, then

$.each(data.produtos ...

Full code :

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

It seems that your code of values (item) is not being put, but, the problem reported with this simple adjustment will work.

    
10.10.2016 / 16:12