Want to add either class, or add font-style: italic, to specific items in map()

Question

I'm using papaParse to convert a CSV to JSON. What I'm trying to figure out is how to only italicize a data.piece if it has the data.type of "Composition".

My console.log works, but I haven't figured out how to correctly implement the DOM manipulation I want.

      function init() {
        Papa.parse(public_spreadsheet_url, {
          download: true,
          header: true,
          complete: showInfo
        })
      }

      window.addEventListener('DOMContentLoaded', init)


      function showInfo(results) {
        var data = results.data

        let dataTypeComposition = (data.map(data=> {if (data.type == "Composition") {
        console.log(data.piece)
     }})) 

        let allData = (data.map(data => `<div class="past-performances"> <div class="datesAndLocations"> <p class="dates"> ${data.date}</p> <p class="locations"> ${data.location} </p></div> <div class="piecesAndDescripts"> <p class="pieces">${data.piece}</p> <p class="descriptions"> ${data.description} </p></div> <br></div>`))
    

    


      document.getElementById("list-container").innerHTML = allData.join(" ")
      } ```

Answer 1

You can do it with a condition in the return of the map. I added indentation for clarity, and removed some extraneous parens.

function init() {
  Papa.parse(public_spreadsheet_url, {
    download: true,
    header: true,
    complete: showInfo
  })
}

window.addEventListener('DOMContentLoaded', init)


function showInfo(results) {
  const data = results.data

  const allData = data.map(data =>
    `<div class="past-performances">
      <div class="datesAndLocations">
        <p class="dates">${data.date}</p>
        <p class="locations">${data.location}</p>
      </div>
      <div class="piecesAndDescripts">
        <p class="pieces">
          ${data.type === 'Composition' ? `<i>${data.piece}</i>` : data.piece}
        </p>
        <p class="descriptions">${data.description}</p>
      </div>
      <br>
    </div>
  `)

  document.getElementById("list-container").innerHTML = allData.join(" ")
}