Jquery – Create a HTML table from object array

const dataArray = [{
    Project: 'Project 1',
    StartYear: '2022',
    EndYear: '2024',
    StartMonth: 'Nov',
    EndMonth: 'Mar',
    Owner: 'Tom'
  },
  {
    Project: 'Project 1.1',
    StartYear: '2022',
    EndYear: '2022',
    StartMonth: 'Mar',
    EndMonth: 'May',
    Owner: 'Tom'
  },
  {
    Project: 'Project 2',
    StartYear: '2024',
    EndYear: '2024',
    StartMonth: 'Jan',
    EndMonth: 'May',
    Owner: 'Tom'
  },
  {
    Project: 'Project 2.1',
    StartYear: '2024',
    EndYear: '2024',
    StartMonth: 'Jan',
    EndMonth: 'Feb',
    Owner: 'Tom'
  },
  {
    Project: 'Project 2.2',
    StartYear: '2024',
    EndYear: '2024',
    StartMonth: 'Feb',
    EndMonth: 'Mar',
    Owner: 'Tom'
  },
  {
    Project: 'Project 2.3',
    StartYear: '2024',
    EndYear: '2024',
    StartMonth: 'Mar',
    EndMonth: 'May',
    Owner: 'Tom'
  },
]
const monthOrder = {
  Jan: 0,
  Feb: 1,
  Mar: 2,
  Apr: 3,
  May: 4,
  Jun: 5,
  Jul: 6,
  Aug: 7,
  Sep: 8,
  Oct: 9,
  Nov: 10,
  Dec: 11,
}

// Extract unique years and months
const years = [...new Set(dataArray.map((item) => [item.StartYear, item.EndYear]).flat())].sort()
// Sort years
years.sort()

// All years with all months from all projects.
let yearsAndMonthSpan = {}

// Loop through years of project and get months for each year.
// Added maxMonthSpan property just for the sake of it
const formattedDataArray = dataArray.map((item) => {
  const {
    StartYear,
    EndYear,
    StartMonth,
    EndMonth
  } = item

  const months = Object.keys(monthOrder)
  const startYear = Number(StartYear)
  const endYear = Number(EndYear)

  let loopYear = startYear
  let startMonthIndex = monthOrder[StartMonth]
  let yearAndMonths = {}

  while (loopYear <= endYear) {
    const endLoopNumber = loopYear === endYear ? monthOrder[EndMonth] + 1 : months.length
    let tempMonths = []

    for (let i = startMonthIndex; i < endLoopNumber; i++) {
      tempMonths = [...tempMonths, months[i]]
    }

    yearAndMonths[loopYear] = tempMonths

    if (!yearsAndMonthSpan[loopYear]) yearsAndMonthSpan[loopYear] = [tempMonths]
    yearsAndMonthSpan[loopYear] = [...new Set([...yearsAndMonthSpan[loopYear], tempMonths].flat())].sort((a, b) => {
      return monthOrder[a] - monthOrder[b]
    })

    loopYear++
    startMonthIndex = 0
  }

  return {
    ...item,
    years: yearAndMonths,
    maxMonthSpan: Object.values(yearAndMonths).flat().filter(Boolean).length,
  }
})

// Added HTML for each month with either YES or empty string
// Formatted the returned project object for usage in making HTML table code easier
const withHtml = formattedDataArray.map((item) => {
  let markedMonths = []

  for (const year in yearsAndMonthSpan) {
    markedMonths = [
      ...markedMonths,
      yearsAndMonthSpan[year].map((month, iMap) => {
        if (!item.years[year]) return '<td></td>'
        return item.years[year].includes(month) ? '<td>YES</td>' : '<td></td>'
      }),
    ]
  }

  return {
    owner: item.Owner,
    start: `${item.StartMonth}-${item.StartYear}`,
    end: `${item.EndMonth}-${item.EndYear}`,
    projectName: item.Project,
    getHtml: markedMonths,
  }
})

const headersStaticTitles = ['Year', 'Start', 'End', 'Owner']
const yearHeaders = Object.entries(yearsAndMonthSpan)
const monthHeaders = Object.values(yearsAndMonthSpan).flat()

// Headers HTML
const headersHtml = `<tr>
      ${headersStaticTitles.map((title) => `<th>${title}</th>`)}
      ${yearHeaders.map((item) => `<th colspan="${item[1].length}">${item[0]}</th>`)}
    </tr>`

// Subheaders HTML
const subheadersHtml = `<tr>
      <td>Month</td>
      ${Array(3)
        .fill()
        .map((x) => `<td></td>`)}
      ${monthHeaders.map((item) => `<th>${item}</th>`)}
    </tr>`

// Projects HTML
const projectsHtml = withHtml.map((item) => {
  return `<tr>
        <td>${item.projectName}</td>
        <td>${item.start}</td>
        <td>${item.end}</td>
        <td>${item.owner}</td>
        ${item.getHtml}
      </tr>`
})

// Removed commas from arrays since it showed them above the table.
const arrayToString = (arr) => arr.toString().replaceAll(',', 'n')

// Improved table
const table = `
        <table>
          ${arrayToString(headersHtml)}

          ${arrayToString(subheadersHtml)}

          ${arrayToString(projectsHtml)}
        </table>
      `
document.getElementById('table-container').innerHTML = table

table {border-collapse:collapse}
td,th {border: 1px solid grey; padding:4px}
th {min-width: 100px;}
tr:nth-child(even) {background-color: #eee}

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div id="table-container"></div>
</body>

</html>