Insert the return json into divs separated by div / div

Question

Insert the return json into divs separated by div / div

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I have a return of type JSON that I'm trying to insert into the div, but it's all inserted one on top of the 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 populate 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 put the contents of each json field in their respective div. I tried to insert id instead of css classes to identify. I have also tried using the .append (), .clone (), addClass (), appendTo but unsuccessful methods. If you can help me.

javascript jquery ajax

asked by anonymous 04.02.2015 / 17:40

2 answers

0

Create a id for every append that works,

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']);

04.02.2015 / 18:21

Create a method to get records by id Error reading binary file

score 2 · Accepted Answer

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

<!-- 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;
});