Insert the json return inside Divs separated by <div> </div>

Question

I got a comeback like JSON I’m trying to insert into the div, but it’s inserted all on top of each other.

<!-- DIV que vai receber as informações -->
<section>
<div class="conteudo">
    <div class="foto"> FOTO </div>
    <div class="inf"> TITULO </div>
    <div class="inf"> DESCRICAO </div>
    <div class="inf"> PRECO </div>
</div>
<div class="conteudo">
    <div class="foto"> FOTO </div>
    <div class="inf"> TITULO </div>
    <div class="inf"> DESCRICAO </div>
    <div class="inf"> PRECO </div>
</div>   

My loop to try to fill the Divs

$("#menu li").click(function() {

var id = $(this).attr("id");

$.ajax({
    type: 'GET',
    url: "categoria/"+id,
    contentType: "charset=utf-8",
    }).done(function(output){
        json = $.parseJSON(output);
        $('.conteudo').empty();
        $.each(json, function(i, items){

            $('.conteudo').append(  
            items.fields['imagem'],+
            items.fields['nome_produto']+
            items.fields['descricao']+
            items.fields['preco_produto']
            ); 
        });
    });
return false;

});

I need to place the content of each json field in its respective div. I tried to insert id instead of css classes to identify. I also tried to use . append() methods. clone(), addClass(), appendTo but to no avail. If you can help me.

Answer 1

You are always inserting in the same div, so the content is being overwritten. Do something like:

<!-- DIV que vai receber as informações -->
<div class="conteudos">
    <div class="conteudo">
        <div class="foto"> FOTO </div>
        <div class="inf"> TITULO </div>
        <div class="inf"> DESCRICAO </div>
        <div class="inf"> PRECO </div>
    </div>
</div>

And then in jQuery:

$("#menu li").click(function() {

var id = $(this).attr("id");

$.ajax({
    type: 'GET',
    url: "categoria/"+id,
    contentType: "charset=utf-8",
    }).done(function(output){
        json = $.parseJSON(output);
        $.each(json, function(i, items){
            // Clona a div e armazena o conteudo em uma var temporária
            var clone = $('.conteudo:last').clone();
            // Aqui você seleciona a div conteudo baseado no idx (i)
            $('.conteudo:eq(i)').append(  
            items.fields['imagem'],+
            items.fields['nome_produto']+
            items.fields['descricao']+
            items.fields['preco_produto']
            );
            // Agora vc insere a div clonada dentro da div mãe
            // Aqui vale uma validação, caso seja a última iteração você não precisa inserir mais divs.
            $('.conteudos').append(clone);
        });
    });
return false;
});

Answer 2

Create a id for each append that for certain,

for example: HTML

<div id='imagem'> Mostra a imagem </div>
<div id='title'> Mostra o titulo </div>
<div id='descricao'> Mostra a descriçao </div>

jQuery:

$('#imagem').append(items.fields['imagem']);
$('#title').append(items.fields['nome_produto']);
$('#descricao').append(items.fields['descricao']);