如何将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？

回答

相关问题