How to Display this AJAX data on complicated HTML code?

Question

I want to display following JSON output to my HTML code I know that my HTML code is very complicated how can I appear this data on HTML code and I want to repeat HTML section on every JSON element. How can I do this?

HTML CODE:

  <!--start main each-->
  <div class="product-view row" style="border-bottom:1px solid #eee;margin-bottom:20px">
  <!--start nested each for loading image from json array-->
    <div class="col-sm-3 col-md-3 col-lg-3">
            <div class="large-image"> 
                <img alt="#" src="<!-- display image name from json array-->"  />
                <div class="image-title"><span class="icon-thumbs-up" id="thumb<!-- display unique id from json array -->" style="font-size:24px;"></span></div> 
            </div>
        </div>
    <div class="col-sm-6 col-md-6 col-lg-6"> 
      <div class="product-label">
          <h4><!-- display fullname and area from json array --></h4>
          <h5><!-- display address1 from json array --></h5>
          <h5><!-- display description from json array --></h5>
      </div>

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3"> 
      <div class="product-label">
          <h4>CATEGORY</h4>
          <!--start nested each for display products from json array-->
            <h5><!-- display product name from json array --></h5>
          <!--start nested each for display products from json array-->
      </div>

    </div>
  </div>
  <!--End main each-->

AJAX CODE:

<script>
   $(document).ready(function(){
       $.ajax({
        url:"<?php echo base_url()?>index.php/myad",
        type: 'GET',
        dataType:'json',
        success: function(data){
          if(!$.isArray(data)){
            data = [data];
          }
          $.each(data, function(key, value){
            //. HOW CAN I DISPLAY ARRAY IN COMPLICATED HTML CODE?
            $.each(value.checkbox , function(k, val){
              //. HOW CAN I DISPLAY NESTED ARRAY RESULT IN COMPLICATED HTML CODE?
            })
          })
        }
       });
   });
</script>

JSON:

{
    "FullName":"shahrushabh",
    "description":"this is demo person register",  
    "Address1":"b\/1",
    "Area":"Sabarmati",
    "status":"active",
    "Thumb":"0",
    "checkbox":
    [
        {"ID":"1","UniqueID":"617993","Product":"electronics","Image":"617993\/alphansomangolips.jpg"},
        {"ID":"2","UniqueID":"617993","Product":"Home Decor","Image":"617993\/banana.jpg"}
    ]
}

Answer 1

To render data from jQuery to DOM, DataTable would be good option to use.

append() can be used to create your dynamic HTML and add to the body.

var HTML="";
$.each(jsonObject, function(key, value){
  HTML += '<div class="col-sm-3 col-md-3 col-lg-3">'+value.FullName+'</div>';
  $.each(value.checkbox, function(k, val){
    HTML += '<div class="col-sm-3 col-md-3 col-lg-3">'+val.Product+'</div>';
  })
});
$('body').append(HTML);

Hope this helps you to understand the concept of append() :)

var jsonObject = [
    {
      "FullName":"shahrushabh",
      "description":"this is demo person register",  
      "Address1":"b\/1",
      "Area":"Sabarmati",
      "status":"active",
      "Thumb":"0",
      "checkbox":
      [
          {"ID":"1","UniqueID":"617993","Product":"electronics","Image":"617993\/alphansomangolips.jpg"},
          {"ID":"2","UniqueID":"617993","Product":"Home Decor","Image":"617993\/banana.jpg"}
      ]
    },
    {
      "FullName":"shahrushabh",
      "description":"this is demo person register",  
      "Address1":"b\/1",
      "Area":"Sabarmati",
      "status":"active",
      "Thumb":"0",
      "checkbox":
      [
        {"ID":"1","UniqueID":"617993","Product":"electronics","Image":"617993\/alphansomangolips.jpg"},
        {"ID":"2","UniqueID":"617993","Product":"Home Decor","Image":"617993\/banana.jpg"}
      ]
    }
 ];

//Declare HTML variable
var HTML = '<div class="product-view row" style="border-bottom:1px solid #eee;margin-bottom:20px">';
$.each(jsonObject, function(key, value){
  HTML += '<div class="col-sm-3 col-md-3 col-lg-3">'+value.FullName+'</div>';
  $.each(value.checkbox, function(k, val){
    HTML += '<div class="col-sm-3 col-md-3 col-lg-3">'+val.Product+'</div>';
  })
});
HTML += '</div>';
//Append to the body
$('body').append(HTML);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>