Question

我有一个类似于以下结构的JSON数据：

{"error":false,"gal_providers":[{

"GalProvider":{
"id":"132",
"uid":"gp_522f1e047329f",
"user_id":"49754",
"author_id":"0"
},

"User":{
"id":"49754",
"uid":"516fe0addefb0",
"name":"Abhishek Sarkar Photography"
},

"GalLocation":{"id":"1","name":"Delhi - NCR","show_in_list":"1","status":"1"},

"GalStore":[]},

{
"GalProvider":{
"id":"53",
"uid":"gp_522f1e0471886",
"user_id":"32643",
"author_id":"28449"
},

"User":{
"id":"32643",
"uid":"50ced38d99754",
"name":"Amar Ramesh"
},

"GalLocation":{"id":"1","name":"Delhi - NCR","show_in_list":"1","status":"1"},


"GalStore":[]}]}

我正在检索数据的jquery函数是：

function render_result(resp){

var page_num = 1;
    jQuery.each(resp.gal_providers, function(index, gal_provider) {

        var pagename = gal_provider.User.name.replace(/\s/g , "-");


        html = "";

        html += '<li class="card boxcard">';
        html += '<a href="http://localhost/myshaadi/gallery/photographer/'+gal_provider.GalProvider.id+'/'+pagename+'"><img src="https://s3.amazonaws.com/myshaadi/backup/images/gallery/cover/'+gal_provider.GalProvider.cover_img+ '" class="cover_image" alt=""/></a>';
        html += '<div class="card_info">';            
        html += '<div class="title" style="height:auto">';
        html += '<a href="" class="single-line">'+gal_provider.User.name+'</a>';
        html += '</div>';
        html += '</div>';
        html += '</li>';

        $("#search_result").html(html);

        page_num++;
    });

    alert(page_num);
}

HTML：

<ul id="search_result" class="col-3">

</ul>

虽然它会提醒3，但它只显示一个结果！这个循环怎么了？感谢

Answer 1

删除

html = "";

来自圈内

你每次迭代都要重置html var。

Answer 2

在循环中，您使用html()覆盖div的先前内容，您可以使用append()向现有内容添加新元素

function render_result(resp) {

    var page_num = 1;
     $("#search_result").html('');
    jQuery.each(resp.gal_providers, function (index, gal_provider) {

        var pagename = gal_provider.User.name.replace(/\s/g, "-");


        html = "";

        html += '<li class="card boxcard">';
        html += '<a href="http://localhost/myshaadi/gallery/photographer/' + gal_provider.GalProvider.id + '/' + pagename + '"><img src="https://s3.amazonaws.com/myshaadi/backup/images/gallery/cover/' + gal_provider.GalProvider.cover_img + '" class="cover_image" alt=""/></a>';
        html += '<div class="card_info">';
        html += '<div class="title" style="height:auto">';
        html += '<a href="" class="single-line">' + gal_provider.User.name + '</a>';
        html += '</div>';
        html += '</div>';
        html += '</li>';

        $("#search_result").append(html);

        page_num++;
    });

    alert(page_num);
}

另一个解决方案是将所有html附加到循环内的html变量，然后在循环之后将html附加到容器

function render_result(resp) {

    var page_num = 1;
    var html = '';
    jQuery.each(resp.gal_providers, function (index, gal_provider) {

        var pagename = gal_provider.User.name.replace(/\s/g, "-");

        html += '<li class="card boxcard">';
        html += '<a href="http://localhost/myshaadi/gallery/photographer/' + gal_provider.GalProvider.id + '/' + pagename + '"><img src="https://s3.amazonaws.com/myshaadi/backup/images/gallery/cover/' + gal_provider.GalProvider.cover_img + '" class="cover_image" alt=""/></a>';
        html += '<div class="card_info">';
        html += '<div class="title" style="height:auto">';
        html += '<a href="" class="single-line">' + gal_provider.User.name + '</a>';
        html += '</div>';
        html += '</div>';
        html += '</li>';

        page_num++;
    });

    $("#search_result").html(html);
}

JSON输出仅打印最后的结果

2 个答案: