backticks showing on the page-CodePudding

hi guys i was trying to make a simple project that takes some books informations from an API an the shows them as <li> elements but when i return them in the map function the backticks are shoen on the webpage, any help?

JS:

function mapToList(json){
    const booksArray = json.works;
    return booksArray.map((book, n) => {
            let {title} = book;
            let authors = getAuthorsArray(book)
            return `<li  id=${n}>
                    <h2>${title}</h2>
                    <p>${authors}</p>
                </li>`
        }
    )
}

html

<body>
    <section >
      <h1 id="welcome">Welcome to the library!</h1>
      <div >
        <input
          type="text"
          id="search-field"
          placeholder="Search for a category or genere, e.g.: fantasy, action..."
        />
        <button id="search-btn">
          <img id="search-img" src="/img/icons8-ricerca.svg" alt="Search" />
        </button>
      </div>
      <ul id="books-list"></ul>
    </section>
  <script type="module" src="/js/main.js"></script>
  </body>

also if you have advices on how to make this cleaner i'll be gratefull

CodePudding user response：

The issue is not with your backticks but with the booksArray.map function.

Array.map always return an array separated by commas.
HTML will add commas as it is when you render an array of data.

To avoid this, just add .join("") at the end of map function.
Like this :

return booksArray.map((book, n) => {  
// Your return HTML logic  
})**.join("")**

Hope this helps!