我想向map()中的特定项添加类或添加font-style: italic

Question

我正在使用papaParse将CSV转换为JSON。我想弄清楚的是，如果一个data.piece的data.type是"Composition“，那么如何只对它进行斜体处理。

我的console.log可以工作，但是我还没有弄清楚如何正确地实现我想要的DOM操作。

      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

您可以在map的返回中使用一个条件来完成此操作。为了清楚起见，我添加了缩进，并删除了一些无关的括号。

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(" ")
}