Dynamically generated content using only last array item

Question

I have the following array of data:

let testimonials = [
        {"name":"Carol Jadraque","service":"Logo Design","quote":"Anton from EG-graphics displays a high degree of professionalism; he is always responsive, caters to the client’s wants & needs and is highly reliable."},
        {"name":"Tony Salloum","service":"Animation","quote":"With a professional approach, attention to details and high dedication to his work, Anton has produced several videos for us, all done on schedule and to the highest of standards. I will definitely use his services again."},
        {"name":"Irina Feldman","service":"Website Design","quote":"Anton is reliable and attentive to detail. We loved his creative approach and ability to quickly respond to our requests and concerns."},
        {"name":"Lilianne Lord","service":"Private Tutoring","quote":"Anton is super friendly, skilled and genuinely interested in helping you out! Highly professional tutor and would recommend him to anyone looking for inspiration as well as a tutor!"},
    ];

I have a loop that is supposed to generate content using that data as follows:

for (var i = 0; i < testimonials.length; i++) { 
   var content = "";
   content += '<div class="item"> <div class="testi_item"> <p class="testimonial-text">' + testimonials[i].quote + '</p> <h4 class="testimonial-name">' + testimonials[i].name + '</h4><h5 class="testimonial-service">' + testimonials[i].service + '</h5> </div> </div>';
   console.log(content);
}
$('.testi_slider').html(content);

The issue is that it generates 4 instances of content using data from the 4th object in the array. I believe my mistake may be involved with using the testimonials[i] , however I am not sure what the correct way to do it would be since the value of i should be starting at 0 and going up to 3.

Could someone please explain where my mistake is?

Answer 1

The issue is that you are re-emptying the content string at each iteration of the loop. Consider instead declaring content before the loop:

var content = "";
for (var i = 0; i < testimonials.length; i++) { 

   content += '<div class="item"> <div class="testi_item"> <p class="testimonial-text">' + testimonials[i].quote + '</p> <h4 class="testimonial-name">' + testimonials[i].name + '</h4><h5 class="testimonial-service">' + testimonials[i].service + '</h5> </div> </div>';
   console.log(content);
}
$('.testi_slider').html(content);