Can't run for loop in template literals

Question

I am trying to build an AJAX function that will fetch data to my html page, I learned that template literals can hold html code in variables so I started using that. I am having an error that for loop display as a text on my page

    <script>
        function getForms() {
            let countryId = document.getElementById("country").value;
            $.ajax({
                url: '{{ url('getServiceDocuments') }}' + '/' + countryId,
                dataType: 'json',
                type: 'GET',
                cache: false,
                async: true,
                success: function (data) {
                    for (let i = 0; i < data[0].length; i++) {
                        $('.documents').html($('.documents').html() + `
                            <ol type="-">
                            <li> <h4>- ${data[1].country_name}</h4></li>
                                <ol>
                                <li style="margin-bottom: -10px">${data[i][0].service_name}</li>
                                     for (let j = 0; j < data[i][0].service_country_doc.length; j++) {
                                        <li style="margin-left: 105px"> -  ${data[i][0].service_country_doc[j].document.doc_title}
                                            <a href="">
                                                  <i class="i-icon-template fa fa-download" aria-hidden="true"></i>
                                            </a>
                                        </li>
                                      }
                                </ol>
                            </ol>
                    `);
                    }
                },
                error: function (jqXhr, textStatus, errorThrown) {
                    console.log(errorThrown);
                    alert(errorThrown);
                }
            })
        }
    </script>

Answer 1

If you unpack the success method, I think you'll find you need to do some more string interpolation to get things working. You currently have the for loop directly in the HTML string so it is not getting interpreted as javascript. Also as pointed out in the comments, the for loop does not return anything.

Here's one possible example of trying to unpack that a little bit into helpers

function listEntry(data, i, j) {
  return `
          <li style="margin-left: 105px">
             -  ${data[i][0].service_country_doc[j].document.doc_title}
             <a href="">
                 <i class="i-icon-template fa fa-download" aria-hidden="true"></i>
             </a>
          </li>`;
}

function listEntries(data, i) {
  let result = "";
  for (let j = 0; j < data[i][0].service_country_doc.length; j++) {
    result += listEntry(data, i, j)
  }
  return result;
}


$.ajax({
  ...
  success: (data) => {
    for (let i = 0; i < data[0].length; i++) {
      $('.documents').html($('.documents').html() + `
         <ol type="-">
           <li> <h4>- ${data[i].country_name}</h4></li>
           <ol>
             <li style="margin-bottom: -10px">${data[i][0].service_name}</li>
             ${listEntries(data,i)}
           </ol>
         </ol>
     `);

  })
})

This could certainly be further cleaned up using some map functions but this might get things working.