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)
: