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

Question

Here is my first question How to decode / separate php encoded json in jquery.

I am working with same this question code, I can get and set my retrieved array separately but I can't not set it in HTML format. Here I put my code with HTML.This code work with page load. window.onload function(){};. any help appreciate.

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

Your looping is wrong change your code to something like this:

NOTE: This example usages a sample data which may not match to yours.

  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>

</div>