CODEWITHSUNDEEP
javascriptjqueryarraysajax
Gowtham
Gowtham

Reputation: 3233

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

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

Upvotes: 1

Views: 42

Answers (1)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

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

Upvotes: 1

Related Questions