How to make a nested for loop inside of string in javascript

Question

I have an AJAX call return with a lot of data.

Thus, I want to update some html contents. I need two nested for loop to append to html elements.

I need first for loop to append all comments to HTML div.
The other for loop to append images for each comment.

However, I have an error around the second loop closing parentheses and the for loop closing curly bracket.

Please Note: second loop there are two variables "i" and "j". I need to fetch all images for each comment

Here is the code:

// post comments box
var comment_box_start = $('#comment-box-start').html(''); // reset comments box 

for(var i= 0; i< json.comments.length; i++){

      comment_box_start.append('<div class="comment-text">'+
                               '<p id="'+json.comments[0].comment_id+'" class="comment-text-filler float-right">'+
                                 json.comments[0].comment_content+
                                '</p>'+
                                '</div>'+

                          '<div id="comment-imgs" class="comment-imgs flex-wrap">'+



                            '<div class="flex flex-row flex-wrap custom-size float-right">'+ 
                              // place condition if the sub_category has a theme 
                              '<div id="post-carousel-item">' +
                                for(var j = 0; j < json.images.length; j++) {
                                 '<a href="../../../../media/'+json.comments[i].comment_images[j].images+'" data-imagelightbox="demo" data-ilb2-caption="Caption 1">'+
                                  '<img src="../../../../media/'+json.comments[i].comment_images[j].images+ '" alt="..."/>'+
                                  '</a>'+
                                  }+
                              '</div>'+
                              // place empty condition if the sub_category hoes not has a theme 
                              '<div></div>'+
                              // close if condition 


                            '</div>'+                             

                        '</div>'+



                        '<div class="d-flex ">'+
                              '<div class="d-flex bd-highlight clearfix justify-content-between m-2">'+

                                    '<div class="order-2 align-self-center mr-auto p-1 ml-2 toltip-color">'+
                                        '<a  href="" data-toggle="tooltip" data-placement="top" title="">'+
                                          //flag icons 
                                          '<i class="fas fa-flag comment-report-flag" id="comment-report-flag">'+
                                           0
                                          '</i>'+
                                        '</a>'+

                                        '<a  href="" data-toggle="tooltip" data-placement="top" title="  " >'+ 
                                          //dislike icons 
                                        '<i id="comment-dislike" class="fas fa-thumbs-down comment-dislike">'+
                                           120
                                        '</i>'+
                                        '</a>'+

                                        '<a  class="" href="" data-toggle="tooltip" data-placement="top" title=" ">'+
                                          //like  icons
                                          '<i id="comment-like" class="fas fa-thumbs-up comment-like">'+
                                            120
                                          '</i>'+
                                        '</a>'+

                                    '</div>'+


                                    // user information
                                    '<div class="commenter-info order-1">'+
                                      '<div class=" text-muted commenter-action-time">'+
                                         "" 
                                         +json.comments[i].comment_date_updated+
                                      '</div>'+
                                      '<div class="user-avatar">'+
                                          '<img src="{% static "towns/firefly.gif" %}">'+
                                      '</div>'+
                                      '<div class="commenter-details">'+
                                        '<a id="commenter-username" class="" href="{% url "user_profile" %}"> user name </a>'+
                                        '<div class="commenter-extra-info">'+
                                           '<span>'+ 

                                           '</span>'+
                                           '<span>'+

                                           '</span>'+


                                        '</div>'+
                                      '</div>'+
                                    '</div>'+


                              '</div>'+

                        '</div>');




}

error here ate the closing parenthesis:

for(var j = 0; j < json.images.length; j++) {

and

 '</div>');

 }

"I have an error" - what's the error? Edit: Nevermind, you've put a for loop inside a string concat - that's not how string concat nor for loops work — fdomn-m
– fdomn-m, Commented May 15, 2020 at 10:41

DannyM · Accepted Answer · 2020-05-15 09:58:33Z

2

You shouldn't do that, it's a flaw in your logic, instead of "making a nested for loop inside of a string" you should make a for loop that generates a string and append it to that string.

For example basing it on your code:

let out = "some html here";
for(var j = 0; j < json.images.length; j++) // some condition here
    out += "some more html here";
out += "some more html";
comment_box_start.append(out);

answered May 15, 2020 at 9:58

DannyM

7336 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

How to make a nested for loop inside of string in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related