如何將json數組設置爲html格式div？

這是我的第一個問題How to decode/separate php encoded json in jquery.如何將json數組設置爲html格式div？

我與同這一問題的代碼的工作，我可以獲取和設置我的檢索陣列分開，但我不能對它進行設置以HTML格式。在這裏，我把我的代碼與HTML.This代碼與頁面加載工作。 window.onload function(){};。任何幫助欣賞。

var j=0; 
var k=0; 
if($.trim(passid) != 0) 
{ 
    $.post('retrivedata.php', { passid: passid}, function(data){    
     alert(1);  
     var da = JSON.parse(data);    
     alert(22); 
     //alert(text(da.QP_Name)); 
     $('div#datatable').text(da.QP_Name); 
     $('div#datatable1').text(da.Question); 

       strtable += ''; 
       strtable += '<div class="col-lg-12" style="vertical-align: middle; padding-left:50px; padding-top: 25px">'; 
       strtable += '<span>';     
       $.each(da, function(i, field)){ 
        if(k % 6 === 0){ 
         strtable += 
         strtable += '<div class="col-lg-2" id="'+Que+i+'">'; 
         strtable += '<figure class="wp-caption"><div class="col-lg-2"><img class="demo" src="assets/images/ico1.png" alt="2" />'; 
         strtable += '<figcaption class="wp-caption-text">'+j+'</figcaption></div></figure>'; 
         strtable += '<div>' + da[i]['Q_Id'] + '</div>'; 
         strtable += '</div>'; 
        }else{ 
         strtable += '<div class="col-lg-2" id="'+Que+i+'">'; 
         strtable += '<figure class="wp-caption"><div class="col-lg-2"><img class="demo" src="assets/images/ico1.png" alt="2" />'; 
         strtable += '<figcaption class="wp-caption-text">'+j+'</figcaption></div></figure>'; 
         strtable += '<div>' + da[i]['Q_Id'] + '</div>'; 
         strtable += '</div>'; 
        } 
        k++; j++; 
       } 
       strtable += '</span>'; 
       strtable += '</div>'; 

       $('div#EnglishLangImageBox').html(strtable); 
    }); 
}

來源

2017-02-24 mahesh

你能夠顯示任何data.your代碼看起來不正確的。沒有循環代碼的 –

這個工作很好。但是當我嘗試添加json到html時，它沒有網絡。我怎樣才能做到這一點。我想用5個元素的元素網格來做到這一點。 – mahesh

至少包含您的初始html。 –

你的循環是錯誤的改變，你的代碼是這樣的：

注：此示例用法可能不匹配您的樣本數據。

var da=[]; 
 
for(var i=0;i <10;i++){ 
 
\t da[i]=[]; 
 
\t da[i]['Q_Id']='Q_Id'+i; 
 
} 
 
var strtable="",k=0,j=0,Que="Text"; 
 
strtable += '<div class="col-lg-12" style="vertical-align: middle; padding-left:50px; padding-top: 25px">'; 
 
strtable += '<span>';  
 
$.each(da, function(i, field){ 
 
    if(k % 6 === 0){ 
 
    \t strtable +="</span>";//close the opened span 
 
    \t strtable +="</div>";//close the opened div 
 
    \t strtable += '<div class="col-lg-12" style="vertical-align: middle; padding-left:50px; padding-top: 25px">';//open new div 
 
    \t strtable += '<span>'; //open new span 
 
     strtable += '<div class="col-lg-2" id="'+Que+i+'">'; 
 
     strtable += '<figure class="wp-caption"><div class="col-lg-2"><img class="demo" src="https://maxcdn.icons8.com/office/PNG/512/Computer_Hardware/mouse_left_click-512.png" alt="2" style="width:32px;height:32px;"/>'; 
 
     strtable += '<figcaption class="wp-caption-text">'+j+'</figcaption></div></figure>'; 
 
     strtable += '<div>' + da[i]['Q_Id'] + '</div>'; 
 
     strtable += '</div>'; 
 
    }else{ 
 
     strtable += '<div class="col-lg-2" id="'+Que+i+'">'; 
 
     strtable += '<figure class="wp-caption"><div class="col-lg-2"><img class="demo" src="https://maxcdn.icons8.com/office/PNG/512/Computer_Hardware/mouse_left_click-512.png" alt="2" style="width:32px;height:32px;" />'; 
 
     strtable += '<figcaption class="wp-caption-text">'+j+'</figcaption></div></figure>'; 
 
     strtable += '<div>' + da[i]['Q_Id'] + '</div>'; 
 
     strtable += '</div>'; 
 
    } 
 
    k++; j++; 
 
}); 
 
strtable += '</span>'; 
 
strtable += '</div>'; 
 

 
$('#EnglishLangImageBox').html(strtable);

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

 
    
 
</div>

來源

2017-02-24 12:56:12

如何將json數組設置爲html格式div？

回答

相關問題