如何在複雜的HTML代碼上顯示此AJAX數據？

我想顯示以下JSON輸出到我的HTML代碼我知道我的HTML代碼非常複雜，我如何在HTML代碼中顯示此數據，並且我想在每個JSON元素上重複HTML部分。我怎樣才能做到這一點？如何在複雜的HTML代碼上顯示此AJAX數據？

HTML代碼：

<!--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代碼：

<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"} 
    ] 
}

來源

2016-09-25 shah rushabh

同樣的概念......你已經嘗試呢？ –

這是類似於[這個]（http://stackoverflow.com/questions/39684034/how-to-display-data-by-using-ajax）只是從別人做你的家務 –

男人我試圖顯示這些數據通過使用.html功能，但它並沒有爲我工作，我試圖顯示ID的數據，但仍然不成功後，我googling它，但一個不成功，我現在看YouTube上的視頻男人我真的很累，所以我問了stackoverflow.com問題 –

從jQuery來DOM渲染數據，數據表是使用好的選擇。

append()可用於創建您的動態HTML並添加到正文中。

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);

希望這有助於你瞭解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>

來源

2016-09-25 16:49:41

如何在複雜的HTML代碼上顯示此AJAX數據？

回答

相關問題