shah rushabh shah rushabh - 2 months ago 14
Ajax Question

How to Display this AJAX data on complicated HTML code?

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

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>