javascript - 在嵌套 $.each 循环期间将 json 对象显示到 html 页面中

Question

AJAX 结果:

当我打算在 HTML 中显示此数据时，其他信息显示正确，但是当尝试使用 .each< 显示 all_images 和 all_amenties 数据时 在同一循环中显示 [object] [object]。下面是我的代码:

"<div id='Carousel"+ this.product_id +"' class='carousel slide' style='width: auto; margin: 0 auto'>"+
      "<div class='carousel-inner'>"+
        $.each(this.all_images, function(k,v) {
            "<div class='item'>"+
                " <img src='"+ v +"' alt=''>"+
            "</div>"
        }) +
      "</div> "+
      "<a class='left carousel-control' href='#Carousel"+ this.product_id +"' data-slide='prev'>‹</a>"+
      "<a class='right carousel-control' href='#Carousel"+ this.product_id +"' data-slide='next'>›</a>"+
    "</div>"+
"</div>"+

Answer 1

您无法将 $.each 调用连接到字符串。结果是一个对象 - 因此您在输出中看到的是[Object object]。

要解决此问题，您可以单独生成字符串并将它们连接起来:

var html = this.all_images.map(function(src) {
  return '<div class="item"><img src="' + src + '" alt=""></div>';
}).join('');

html = '<div id="Carousel' + this.product_id + '" class="carousel slide" style="width: auto; margin: 0 auto"><div class="carousel-inner">' + html + '</div><a class="left carousel-control" href="#Carousel' + this.product_id + '" data-slide="prev">‹</a><a class="right carousel-control" href="#Carousel' + this.product_id + '" data-slide="next">›</a></div>';