呼び出しデータ - それは、カテゴリのリストです - ヘッダー画像の下

Question

を設定するには、私が持っているdiv要素である：私は私のようなデータを呼び出したい既製のAPIを持って

<div class="nz-section horizontal autoheight-false animate-false full-width-false " data-animation-speed="35000" 
    data-parallax="false" id="div_c9c6_2"> 
    <div class="container"> 
     <div class="nz-row"> 
      <div class="col vc_col-sm-3 col3 element-animate-false valign-top" data-effect="none" data-align="center"> 
       <div class="col-inner"> 
        <a class="nz-single-image" href="#"><img class="alignnone size-full wp-image-5403 " 
                  src="upload/services1.jpg" alt="5403" width="440" 
                  height="340"></a> 
        <div class='gap nz-clearfix' id="div_c9c6_3">&nbsp;</div> 
        <h2 id="h2_c9c6_0" class="vc_custom_heading">CATEGORY 1</h2> 
        <div class="sep-wrap element-animate element-animate-false center nz-clearfix" data-effect="none"> 
         <div class="nz-separator solid" id="div_c9c6_4">&nbsp;</div> 
        </div> 
       </div> 
      </div> 
      <div class="col vc_col-sm-3 col3 element-animate-false valign-top" data-effect="none" data-align="center"> 
       <div class="col-inner"> 
        <a class="nz-single-image" href="#"><img class="alignnone size-full wp-image-5403 " 
                  src="upload/services1.jpg" alt="5403" width="440" 
                  height="340"></a> 
        <div class='gap nz-clearfix' id="div_c9c6_3">&nbsp;</div> 
        <h2 id="h2_c9c6_0" class="vc_custom_heading">CATEGORY 2</h2> 
        <div class="sep-wrap element-animate element-animate-false center nz-clearfix" data-effect="none"> 
         <div class="nz-separator solid" id="div_c9c6_4">&nbsp;</div> 
        </div> 
       </div> 
      </div> 
      <div class="col vc_col-sm-3 col3 element-animate-false valign-top" data-effect="none" data-align="center"> 
       <div class="col-inner"> 
        <a class="nz-single-image" href="#"><img class="alignnone size-full wp-image-5403 " 
                  src="upload/services1.jpg" alt="5403" width="440" 
                  height="340"></a> 
        <div class='gap nz-clearfix' id="div_c9c6_3">&nbsp;</div> 
        <h2 id="h2_c9c6_0" class="vc_custom_heading">CATEGORY 3</h2> 
        <div class="sep-wrap element-animate element-animate-false center nz-clearfix" data-effect="none"> 
         <div class="nz-separator solid" id="div_c9c6_4">&nbsp;</div> 
        </div> 
       </div> 
      </div> 
      <div class="col vc_col-sm-3 col3 element-animate-false valign-top" data-effect="none" data-align="center"> 
       <div class="col-inner"> 
        <a class="nz-single-image" href="#"><img class="alignnone size-full wp-image-5403 " 
                  src="upload/services1.jpg" alt="5403" width="440" 
                  height="340"></a> 
        <div class='gap nz-clearfix' id="div_c9c6_3">&nbsp;</div> 
        <h2 id="h2_c9c6_0" class="vc_custom_heading">CATEGORY 4</h2> 
        <div class="sep-wrap element-animate element-animate-false center nz-clearfix" data-effect="none"> 
         <div class="nz-separator solid" id="div_c9c6_4">&nbsp;</div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

below これで、divにカテゴリ 'title'とカバーイメージ 'imageCoverUrl'が表示されていることを確認します。

私のAPIを呼び出すにはどうすればいいですか？

Answer 1

コード HTMLコード以下試し

<div class="nz-section horizontal autoheight-false animate-false full-width-false " data-animation-speed="35000" data-parallax="false" id="div_c9c6_2"> 
    <div class="container"> 
     <div class="nz-row" id="categories"> 
     </div> 
    </div> 
</div> 

のjQueryコード

function printHTML(data){ 
    var html = ""; 
    html = ' <div class="col vc_col-sm-3 col3 element-animate-false valign-top" data-effect="none" data-align="center">'; 
    html += '  <div class="col-inner" >'; 
    html += '   <a class="nz-single-image" href="#"><img class="alignnone size-full wp-image-5403 " src="'+data.imageCoverThumbUrl+'" alt="5403" width="440" height="340"></a>'; 
    html += '   <div class="gap nz-clearfix" id="div_c9c6_3">&nbsp;</div>'; 
    html += '   <h2 id="h2_c9c6_0" class="vc_custom_heading">'+data.title+'</h2>'; 
    html += '   <div class="sep-wrap element-animate element-animate-false center nz-clearfix" data-effect="none">'; 
    html += '    <div class="nz-separator solid" id="div_c9c6_4">&nbsp;</div>'; 
    html += '   </div>'; 
    html += '  </div>'; 
    html += ' </div>'; 
    return html; 
} 
var json = [{"title":"Environment", "imageCoverThumbUrl":"Environment"}]; 
$(json).each(function(index, val){ 
    $("#categories").append(printHTML(val)); 
});