javascript – Nested Template Strings/Literals Error: Missing }

javascript – Nested Template Strings/Literals Error: Missing }

The content of a token placeholder in a template literal must be an expression, but youre trying to use a statement (let collapselist = ...). You cant do that.

Instead, its probably cleanest to create the list first and then embed it in the string:

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;
};

then

${collapelist}

…in the template literal.

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;
}

javascript – Nested Template Strings/Literals Error: Missing }

if you have ES6 features you need to standarize your code with the new good practices of ES6 features, for example the use of arrow functions etc, Your error was that you declare your function inside {}.

const makeNavList = () => {
    let myList = ;

    const collapseList = () =>{ 
        let innerList = ;
        $(#superfish-1>li.ul>li).each(value => {
            const linkPath = $(value).find(a).attr(href);
            const linkText = $(value).find(a).text();
            innerList += `<li><a href=${linkPath}>${linkText}</a></li>`
        });

        return innerList;
    }

    $(#superfish-1>li).each(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>
            ${`${collapseList()}`} 
        </ul>
        </li>`

    })

    return myList
}

Leave a Reply

Your email address will not be published. Required fields are marked *