javascript - 如何将json数组设置为html表单div。？

Question

这是我的第一个问题 How to decode / separate php encoded json in jquery.

我正在使用相同的问题代码，我可以获取并设置检索到的数组单独但我不能不将其设置为 HTML 格式。在这里，我将我的代码与 HTML 放在一起。此代码适用于页面加载。 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);
    });
}

Answer 1

你的循环是错误的，将你的代码更改为如下所示:

注意:此示例使用的示例数据可能与您的不匹配。

  var da=[];
 for(var i=0;i <10;i++){
	 da[i]=[];
	 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){
    	 strtable +="</span>";//close the opened span
    	 strtable +="</div>";//close the opened div
    	 strtable += '<div class="col-lg-12" style="vertical-align: middle; padding-left:50px; padding-top: 25px">';//open new div
    	 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>