从api调用数据 - 设置标题和图像

Question

以下是我所拥有的div - 它是一个类别列表：

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

我有一个现成的API，我想用下面的数据调用 所以现在我想确保div将列出与其相关的类别'标题'和封面图像'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));
});