how can i loop through an array and create items dynamically in jquery

Question

I want to loop through an array which was returned as a response from an api call and create elements dynamically with it. This is my code,

$.ajax({
    url: "http://localhost:3333/testimonials",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    type: "GET",
    success: function (response) {    
       jQuery.each(response, function(index, value){
          var item = $("<div class='item'></div>");                                 
          var shadowEffect = $("<div class='shadow-effect'></div>");
          var testimonialName = $("<div class='testimonial-name'>"+value.name+"</div>");                                
          var review = $("<p></p>").text(value.review);

          $("#customers-testimonials").append(item);                                    
          $(".item").append(shadowEffect,testimonialName);
          $(".shadow-effect").append(review);
        });
       }
     });

I want to create a structure like this dynamically,

<div id="customers-testimonials" class="owl-carousel">                      
    <div class="item">
       <div class="shadow-effect">
           <img class="img-circle" src="http://themes.audemedia.com/html/goodgrowth/images/testimonial3.jpg" alt="">
           <p>Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate.</p>
       </div>
       <div class="testimonial-name">EMILIANO AQUILANI</div>
   </div>
   <div class="item">
       <div class="shadow-effect">
           <img class="img-circle" src="http://themes.audemedia.com/html/goodgrowth/images/testimonial3.jpg" alt="">
           <p>Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate.</p>
       </div>
       <div class="testimonial-name">EMILIANO AQUILANI</div>
   </div>
</div>

But here is what i get with my code,

<div id="customers-testimonials" class="owl-carousel">                      
        <div class="item">
           <div class="shadow-effect">
               <img class="img-circle" src="http://themes.audemedia.com/html/goodgrowth/images/testimonial3.jpg" alt="">
               <p>Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate.</p>
           </div>
           <div class="testimonial-name">EMILIANO AQUILANI</div>
           <div class="shadow-effect"> <======= Repeated item
               <img class="img-circle" src="http://themes.audemedia.com/html/goodgrowth/images/testimonial3.jpg" alt="">
               <p>Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate.</p>
           </div>
           <div class="testimonial-name">EMILIANO AQUILANI</div> <======= Repeated item
       </div>
       <div class="item">
           <div class="shadow-effect">
               <img class="img-circle" src="http://themes.audemedia.com/html/goodgrowth/images/testimonial3.jpg" alt="">
               <p>Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate.</p>
           </div>
           <div class="testimonial-name">EMILIANO AQUILANI</div>
       </div>
    </div>

How do I resolve it? Any help would be much appreciated Thanks

Mohamed-Yousef · Accepted Answer · 2017-12-31 12:21:52Z

1

I don't know from where your code generate the <img> but anyway you can use the next code

$.ajax({
  url: "http://localhost:3333/testimonials",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  type: "GET",
  success: function (response) {    
      jQuery.each(response, function(index, value){
        var  ItemHtml = "<div class='item'>"+
                          "<div class='shadow-effect'>"+
                             "<img class='img-circle' src='http://themes.audemedia.com/html/goodgrowth/images/testimonial3.jpg' alt=''>"+
                             "<p>"+value.review+"</p>"+
                          "</div>" +
                          "<div class='testimonial-name'>"+value.name+"</div>"+
                        "</div>";               

        $("#customers-testimonials").append(ItemHtml);
      });
  }
});

Note: I added the <img> line manually in my code .. you can change <img> code line with your code .. but I think you got the point from coding this way .. for me it may a little bit confusing while use more of create and append so I always prefer this way to keep my code clear for me to read

edited Dec 31, 2017 at 12:21

answered Dec 31, 2017 at 12:15

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

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

3 Comments

Gowtham Over a year ago

works as expected! thanks Mohamed and sorry for confusing you with the <img> tag

Mohamed-Yousef Over a year ago

@Gowtham never mind .. You're totally welcome .. Happy new year :-)

Gowtham Over a year ago

Happy new year to you too :)

Collectives™ on Stack Overflow

how can i loop through an array and create items dynamically in jquery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related