如何將迭代的json數據發送到html Id的

我的html和json的jquery如下。請有人幫助我在JavaScript函數中做到這一點。有沒有其他方式沒有使用克隆功能？用純JavaScript可以，我們這個做任何其他的方式來顯示HTML的id如何將迭代的json數據發送到html Id的

$(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); 
 
    }); 
 
});

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

我的HTML和使用jQuery JSON JSON內容如下。請有人幫助我在JavaScript函數中做到這一點。有沒有其他方式沒有使用克隆功能？用純JavaScript可以，我們該做的任何其他方式來顯示HTML的id 結果json的內容應該是像下面

 Image 1 
     Name 1 
     Description 1 
     product 1 

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

來源

2017-10-09 Rajesh Choudary

克隆模板是好辦法做到這一點。你也可以使用'document.createElement'在JS中從頭開始構建結構。 – Mouser

它只是一個例子，我有一個大項目。我無法克隆圖形數據。請問你可以給我發送小提琴鏈接如何在JavaScript中做同樣的東西 –

@Tavish Aggarwal你可以預期與不同的JavaScript功能沒有克隆 –

可以使用級聯構建HTML作爲一個字符串JSON數據：要添加一個唯一的ID於每一行使用由foreach循環所提供的索引i可變

$(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); 
 
    }); 
 
});

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

來源

2017-10-09 11:39:39 madalinivascu

你知道如何停止獲得來自dic元素的前四個結果 –

什麼dic元素？ – madalinivascu

如何將迭代的json數據發送到html Id的

回答

相關問題