복잡한 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

의 개념을 이해하는 데 도움이? –

이것은 [this] (http://stackoverflow.com/questions/39684034/how-to-display-data-by-using-ajax)와 비슷합니다. 다른 사람으로부터 집에서 일하는 것 –

남자이 데이터를 표시하려고했습니다. .html 함수를 사용하지만 그것은 나를 위해 일한 및 ID 데이터를 표시하려고했지만 여전히 인터넷 검색 후 하나만 다시 실패하고 나는 지금 정말 피곤한 남자 YouTube에서 비디오를 본 나는 stackoverflow.com에 질문을 물었다. –

가 DOM에 jQuery를 데이터를 렌더링하려면, DataTable을 사용하는 좋은 옵션이 될 것입니다.

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 데이터를 표시하는 방법은 무엇입니까?

답변

관련 문제