Display json object into html page during nested $.each loop

Question

AJAX result:

When I'm going to display this data in HTML other information displaying correctl, but when trying to display all_images and all_amenties data by using .each in same loop its showing [object] [object]. Below is my code:

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

please provide more details (like the full javascript function) and more description. — marmeladze
– marmeladze, Commented Feb 2, 2017 at 8:19

Rory McCrossan · Accepted Answer · 2017-02-02 08:34:10Z

1

You can't concatenate an $.each call to a string. The result is an object - hence what you see in the output, [Object object].

To fix this you can generate the strings separately and concatenate them:

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

answered Feb 2, 2017 at 8:34

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mauvm · Accepted Answer · 2017-02-02 08:49:05Z

0

Simply change $.each to $.map, add a return before "<div class='item'>"+ and add .join('') after $.map(). $.map calls the function for each value in the array, stores the return value of each function in a new array, and returns it. So:

$.map([1, 2, 3], function (v) { return v * 2 }).join('') === '246'

edited Feb 2, 2017 at 8:49

answered Feb 2, 2017 at 8:43

mauvm

3,6563 gold badges20 silver badges19 bronze badges

Collectives™ on Stack Overflow

Display json object into html page during nested $.each loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related