JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div id="g-primaries-table" style="
    background: #eee;
">
	
	
	<table>
		<thead>
			<tr class="g-table-heads">
				
				<th class="g-month-head" colspan="2">February 2020</th>
				<th class="g-dem-head"><div class="g-label-abbr">Dem.</div><div class="g-label-full">Democratic</div></th>
				<th class="g-rep-head"><div class="g-label-abbr">Rep.</div><div class="g-label-full">Republican</div></th>
				
			</tr>
		</thead>
		
		<tbody class="g-table-body">
			
			<tr class="g-event g-priority-1">
				
				
				
				
				
				<td class="g-date g-date-first">
					<span class="g-day-number">3</span>
					<span class="g-day-name">Mon. </span>
				</td>
				
				
				
				<td class="g-event-info">
					<div class="g-event-name">Iowa caucuses<span class="g-asterisk">*</span></div>
					<div class="g-event-description">Because these are the first votes cast, there is a lot at stake in terms of momentum and attention from donors and the news media. The results here will winnow the field.</div>
				</td>
				
				
				
				
				
				
				<td class="g-dem-dels" style="background-color: rgba(125,190,235,0.0985576923076923);">41</td>
				<td class="g-rep-dels" style="background-color: rgba(245,140,140,0.23255813953488372);">40</td>
				
			</tr>
			
		</tbody>
		
		<tbody class="g-table-body">
			
			<tr class="g-event g-priority-1">
				
				
				
				
				
				<td class="g-date g-date-first">
					<span class="g-day-number">11</span>
					<span class="g-day-name">Tue. </span>
				</td>
				
				
				
				<td class="g-event-info">
					<div class="g-event-name">New Hampshire primaries<span class="g-asterisk">*</span></div>
					<div class="g-event-description">Don't be surprised if only a few candidates are still standing after the votes are counted here.  </div>
				</td>
				
				
				
				
				
				
				<td class="g-dem-dels" style="background-color: rgba(125,190,235,0.057692307692307696);">24</td>
				<td class="g-rep-dels" style="background-color:...

JavaScript

const monthWordToNumberMap = {
	'February': '2',
  'March': '3',
  'April': '4',
  'May': '5',
  'June': '6',
  'July': '7',
  'August': '8',
  'September': '9',
  'November': '11',
};

let month = '';
let dayNumber = '';
let dayName = '';
const year = '2020';
const allData = [];


$('table').each((i, el) => {
	month = getMonth(el);
	loadEventsForMonth(el);
});

console.log(JSON.stringify(allData));


function loadEventsForMonth(tableEl) {
	$(tableEl).find('.g-table-body').each((i, el) => {
  	dayNumber = getDayNumber(el);
    dayName = getDayName(el);
		
    loadEventsForDay(el);
  });
}

function loadEventsForDay(tableBody) {
	$(tableBody).find('.g-event').each((i, el) => {
  	const primary = {
      month,
      dayNumber,
      dayName,
      eventType: 'primary-election',
      eventTitle: getEventTitle(el),
      eventDescription: getEventDesc(el),
    };

    allData.push(primary);
  });
}

function getEventTitle(el) {
  const e = findByClass(el, 'g-event-name');
  return e.text();
}

function getEventDesc(el) {
  const e = findByClass(el, 'g-event-description');
  return e.text();
  
}

function getDayNumber(el) {
  const e = findByClass(el, 'g-day-number');
  return e.text();
}

function getDayName(el) {
	const e = findByClass(el, 'g-day-name');
  return e.text();
}

function findByClass(el, className) {
	const theEl = $(el).find('.' + className);
  if (theEl.length) return $(theEl[0]);
  return { text: () => {} };
}


function getMonth(el) {
	const monthEl = $(el).find('.g-month-head');
  const monthWord = $(monthEl).text().split(' ')[0];
  return monthWordToNumberMap[monthWord];
}