Problem with each jquery

Asked

Viewed 165 times

3

I’m getting via JSON one array, I walk him with the .each() of JQUERY, so I mount my html, and I put it in a div within my page. All this said is done:

$.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 gave the console.log(html) says that the variable not this definition, this I know the problem, is due to the scope of variable, but I tried to put the .html() within the .each() and I also did not succeed, my html appears, but does not put on the page.

Where can my mistake be? And What better way to do this ?

Man console.log(data):

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

jquery

  • So @Renanrodrigues, is coming date values that are 4 items within the array and the html has values? on the page does not appear at least html with the fixed information you have placed?

  • What happens and that I am doing a test to know if it will put the items on the screen, with fixed values, I know that is getting the data correctly now the problem is on the screen.

  • I do not know well, I made an edit, your html was wrong! take a look see if it appears as you said yourself 4 fixed items (because it will run 4 times if it is right).

1 answer

2


A simple adjustment:

In the $.each not only is data is data.produtos by way of sending, then, 

$.each(data.produtos ...

Follows complete 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 to me that your value code (item) is not being placed, but, the problem reported with this simple adjustment will work.

  • Irmao isn’t really putting html on the page yet

  • 1

    You have to see if you’re really getting high on data is coming something? have how to paste the result in your question?

  • 1

    Yes just a minute

  • I updated my question

  • The strange thing is that only one item appears, besides it only appears when inspecting element, because in the site itself is not the problem,

  • you edited and placed the code of my question? has the data he returns 4 objetos need to open what’s inside! but, I see that it’s a simple thing. Post your html code of this page?

  • I updated my code, and I checked that it’s really working, but really when it comes to iterating the items I’m not succeeding, I think the problem is when adding the items. Because the basic idea is to take what is already inside the div, and sum it with the new html, and so iterate and in the end I will have several items and just put in the div

  • the Somar there would be concatenate, has some problem that for some reason is hidden !!!

  • Let’s go continue this discussion in chat.

Show 4 more comments

Browser other questions tagged jquery

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