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

时间:2017-02-24 12:34:37

标签: javascript php jquery html json

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

我正在使用相同的问题代码,我可以获取并设置我检索到的数组 单独但我不能以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);
    });
}

1 个答案:

答案 0 :(得分: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>