Nested Template Strings/Literals Error: Missing }

Question

I am trying to make a nav bar using information pulled from the DOM, but I keep getting an error associated ES6 template strings (nested in this case) that reads "Uncaught SyntaxError: Missing } in template expression"

I'm pretty new to ES6 syntax. Any suggestions?

function makeNavList() {
var myList = ``;

$("#superfish-1>li").each(function (index, value) {

    myList += `<li>
    <a href="#!">${$(value).find(">a").text()}</a>

    <ul class="nav-dropdown">
    <li><a href="${$(value).find("a").attr("href")}">${$(value).find(">a").text()} - All</a></li>
    ${
        let collapselist= () =>{ 
            let innerlist = "";
            $("#superfish-1>li.ul>li").each(function(index, value){
                let linkPath = $(value).find("a").attr("href");
                let linkText = $(value).find("a").text();
                innerlist += `<li>
                <a href="${linkPath}">${linkText}</a>
                </li>`
            })
            return innerlist;
        }

    }</ul>
    </li>`

})
return myList
}

Answer 1

Move your function outside the template. You can not declare statements inside ${}:

function makeNavList() {
var myList = ``;

$("#superfish-1>li").each(function (index, value) {

    myList += `<li>
    <a href="#!">${$(value).find(">a").text()}</a>

    <ul class="nav-dropdown">
    <li><a href="${$(value).find("a").attr("href")}">${$(value).find(">a").text()} - All</a></li>
    ${getCollapselist()}</ul>
    </li>`

})
return myList
}

getCollapselist = function(){
  let innerlist = "";
  $("#superfish-1>li.ul>li").each(function(index, value){
      let linkPath = $(value).find("a").attr("href");
      let linkText = $(value).find("a").text();
      innerlist += `<li>
      <a href="${linkPath}">${linkText}</a>
      </li>`
  })
  return innerlist;
}