Actually I want to run each loop and append it, but inside append I want to run another loop using template literals but it throw error

Question

please concern on my code, and find solutions for me, Actually I want to run each loop and append it, but inside append I want to run another loop using template literals but it throw error. Uncaught SyntaxError: Missing } in template expression

$(document).ready(function(){ comments = ;

        $.each(comments,function(key,value){
            
            $('#commentContainer').append(`
            
            <div class="commentContainer mt3">
                <div class="commentbox">
                    <div class="commentPerson d-flex justify-content-between">
                        <div class="commentsubPerson d-flex">
                            <div class="commentedPersonimg">
                                <img src="https://thumbs.dreamstime.com/b/default-avatar-profile-image-vector-social-media-user-icon-potrait-182347582.jpg" alt="">
                            </div>
                            <div class="comentedPersonName mt0">
                                <label for="">Test</label>
                            </div>
                        </div>
                        <div class="commentDate">
                            <label for="">4 days ago</label>
                        </div>
                        </div>
                        <div class="comment">
                            <p>New Comment From User</p>
                        </div>
                        
                        <div>
                            <button type="button" class="replyButton rep" data-id="" id="replybutton">Reply</button>
                            <button class="replyCounter"><span>1</span> Reply</button>
                        </div>
                        
                        <form class="comment_reply " id="reply_request_form" data-id="">
                            <input type="hidden" name="_token" value="thrWB62yPQnmIQrhGX918omsXgQIxg0nOnN4GdFQ">                                            <div class="inputBox">
                            <input type="hidden" class="hidden" id="comment_id" value="102">
                            <input type="hidden" class="hidden" id="user_id" value="">
                            <input type="hidden" class="hidden" id="theme_id" value="29">
                            <input type="text" class="hidden" id="reply_text" placeholder="Write a Reply" value="" required="">
                            <button type="button" class="replyButton mt-2 reply_request">Send</button>
                        </form>
                    </div>
                    
                    
                        
                        
                      ${  
                            $.each(value.replycomments,function(ind,val){ `
                                
                                <p>here something goes related html</p>

                                `                            
                            });

                        }
                        
                        
                         

                </div>
            </div>
            
            
            
            `)
            
            
        });
        
    });

Answer 1

• In the second loop you should return whatever is between template literals.

• You have extra brackets in your code if that is all. Try formatting the code to see the problem using a code formatter. Prettier is one of the most common code formatters which is available both as a VS Code extension and online.

This should work in this case:

$.each(comments, function (key, value) {
  $("#commentContainer").append(`
    <div class="commentContainer mt3">
      <div class="commentbox">

        <div class="commentPerson d-flex justify-content-between">
          <div class="commentsubPerson d-flex">
            <div class="commentedPersonimg">
              <img
                src="https://thumbs.dreamstime.com/b/default-avatar-profile-image-vector-social-media-user-icon-potrait-182347582.jpg"
                alt="">
            </div>
            <div class="comentedPersonName mt0">
              <label for="">Test</label>
            </div>
          </div>
          <div class="commentDate">
            <label for="">4 days ago</label>
          </div>
        </div>

        <div class="comment">
          <p>New Comment From User</p>
        </div>

        <div>
          <button type="button" class="replyButton rep" data-id="" id="replybutton">Reply</button>
          <button class="replyCounter"><span>1</span> Reply</button>
        </div>

        <form class="comment_reply " id="reply_request_form" data-id="">
          <input type="hidden" name="_token" value="thrWB62yPQnmIQrhGX918omsXgQIxg0nOnN4GdFQ">
          <div class="inputBox">
            <input type="hidden" class="hidden" id="comment_id" value="102">
            <input type="hidden" class="hidden" id="user_id" value="">
            <input type="hidden" class="hidden" id="theme_id" value="29">
            <input type="text" class="hidden" id="reply_text" placeholder="Write a Reply" value="" required="">
            <button type="button" class="replyButton mt-2 reply_request">Send</button>
        </form>

        ${$.each(value.replycomments, function (ind, val) {
          return `<p>here something goes related html</p>`
        })}
      </div>
    </div>
  `)
})