Question

我的html和json与jquery在下面。请有人帮我在javascript函数中执行此操作。没有使用克隆功能还有其他方法吗？使用纯JavaScript，我们可以用任何其他方式在HTML id

中显示json内容

＆＃13;

$(function () {
    // Fake JSON result - array of values
    json = [{
        fields: {
            imagem: "Image 1",
            nome_produto: "Name 1",
            descricao: "Description 1",
            preco_produto: "product 1"
        }
    }, {
        fields: {
            imagem: "Image 2",
            nome_produto: "Name 2",
            descricao: "Description 2",
            preco_produto: "product 2"
        }
    }, {
        fields: {
            imagem: "Image 3",
            nome_produto: "Name 3",
            descricao: "Description 3",
            preco_produto: "product 3"
        }
    }];
    
    // take a copy of an existing one as a template
    $.each(json, function (i, items) {
        var clone = $('.conteudo:first').clone();
        clone.find('.foto').text(items.fields['imagem']);
        clone.find('.inf:eq(0)').text(items.fields['nome_produto']);
        clone.find('.inf:eq(1)').text(items.fields['descricao']);
        clone.find('.inf:eq(2)').text(items.fields['preco_produto']);
        $('section').append(clone);
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
    
</section>

＆＃13;

我的html和json与jquery在下面。请有人帮我在javascript函数中执行此操作。没有使用克隆功能还有其他方法吗？使用纯JavaScript，我们可以用任何其他方式在HTML id中显示json内容结果应该是json数据，如下所示

        Image 1
        Name 1
        Description 1
        product 1

        Image 2
        Name 2
        Description 2
        product 2
        Image 3
        Name 3
        Description 3
        product

Answer 1

您可以使用串联将html构建为字符串：要为每一行添加唯一ID，请使用foreach循环提供的索引i变量

＆＃13;

$(function () {
    // Fake JSON result - array of values
    json = [{
        fields: {
            imagem: "Image 1",
            nome_produto: "Name 1",
            descricao: "Description 1",
            preco_produto: "product 1"
        }
    }, {
        fields: {
            imagem: "Image 2",
            nome_produto: "Name 2",
            descricao: "Description 2",
            preco_produto: "product 2"
        }
    }, {
        fields: {
            imagem: "Image 3",
            nome_produto: "Name 3",
            descricao: "Description 3",
            preco_produto: "product 3"
        }
    }];
    
    // take a copy of an existing one as a template
    $.each(json, function (i, items) {
        var clone = '<div class="conteudo" id="conteudo'+i+'"><div class="foto">'+items.fields['imagem']+'</div><div class="inf">'+items.fields['nome_produto']+'</div><div class="inf">'+items.fields['descricao']+'</div><div class="inf">'+items.fields['preco_produto']+'</div></div>'
       
        $('section').append(clone);
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
   
    
</section>

＆＃13;

如何将迭代的json数据发送到html Id

1 个答案: