Question

我想在我的HTML代码中显示以下JSON输出我知道我的HTML代码非常复杂，我如何在HTML代码上显示这些数据，我想在每个JSON元素上重复HTML部分。我怎么能这样做？

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代码：

<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

要将数据从jQuery呈现到DOM，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()：）

的概念

＆＃13;

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

＆＃13;

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

＆＃13;

如何在复杂的HTML代码上显示此AJAX数据？

1 个答案: