0

I am trying to dynamically create a html UL with my own json data and a map function incorporating js ES6 backticks. I am almost there but I'm stuck with nesting a value in a variable.

I have tried escaping the nested tool but no success

 let frontList = data[i].tools.Front.map(tool => {
  return `<li>${tool.tool}</li>`
}).join("")

This way above is working as you suggested, thank you!

let output = ''
  output += `
    <span class="closeBtn">&times;</span>
    <h3>${data[i].title}</h3>
    <p> ${data[i].desc}</p>
    <h5>Front End</h5>
    <ul>
      ${data[i].tools.Front.map(tool => {
          return `<li>${tool.tool1}</li>`
        }).join("")}
    </ul>
    `
  if (data[i].tools.Back) {
    output += `<h5>Back End</h5>
    <ul>
      <li>${data[i].tools.Back[0].tool1}</li>
      <li>${data[i].tools.Back[1].tool2}</li>
      <li>${data[i].tools.Back[2].tool3}</li>
      <li>${data[i].tools.Back[3].tool4}</li>
      <li>${data[i].tools.Back[4].tool5}</li>
    </ul>`
    }

I expected the nested tool to be escaped but i'm getting error..

Uncaught SyntaxError: Invalid or unexpected token

Al_Smith
  • 13
  • 5
  • 2
    The best answer here is "don't". Make a separate variable (`let list = data[i].tools.Front.map( ...`) and embed the variable (`
      ${list}
    `).     – JJJ May 25 '19 at 19:55
  • Thank you JJJ, I will be sure to try this later and accept your answer. – Al_Smith May 26 '19 at 12:08
  • That's all good JJJ, my function is now doing what I want, thank you again. Cannot see accept answer link.. – Al_Smith May 26 '19 at 19:24

0 Answers0