JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class="g-item g-candidates" style="
    background: #eee;
">

      

    

    

    
      <div class="g-item g-cand ">
    

      

<div class="g-cand-wrapper ">
	
	<div class="g-img-wrapper">
		<div id="g-gillibrand" class="g-img g-dropped_out ">
			<div class="g-inner" style="background-image: url(https://static01.nyt.com/newsgraphics/2019/01/08/candidate-tracker/058fdd9a852c2d2ceb1c28882d6854f0b9ca8496/all.png); background-position: 0 32.608695652173914%;"></div>	
		</div>
		
		<div class="g-dem g-small-note">Democrat</div>
		
		
			
			
	</div>
	

	<div class="g-info ">
		<div id="g-gillibrand" class="g-name">Kirsten Gillibrand<span class="g-age">, 52</span></div>
		<div class="g-title">Senator from New York; former congresswoman</div>
		
			
		
	</div>
</div>



    </div>

    

    
      <div class="g-item g-text ">
    

      <p class="g-body"><a href="https://www.nytimes.com/2019/08/28/us/politics/kirsten-gillibrand-2020-drop-out.html">Withdrew from the presidential race</a> in August, saying that failing to qualify for the September debate was fatal to her candidacy. She said she would continue to champion issues of women’s equality and support women running for Congress.</p>


    </div>

    

    
      <div class="g-item g-cand ">
    

      

<div class="g-cand-wrapper ">
	
	<div class="g-img-wrapper">
		<div id="g-hickenlooper" class="g-img g-dropped_out ">
			<div class="g-inner" style="background-image: url(https://static01.nyt.com/newsgraphics/2019/01/08/candidate-tracker/058fdd9a852c2d2ceb1c28882d6854f0b9ca8496/all.png); background-position: 0 36.95652173913043%;"></div>	
		</div>
		
		<div class="g-dem g-small-note">Democrat</div>
		
		
			
			
	</div>
	

	<div class="g-info ">
		<div id="g-hickenlooper" class="g-name">John Hickenlooper<span class="g-age">, 67</span></div>
		<div class="g-title">Former governor of Colorado; former mayor of Denver</div>
		
			
		
	</div>
</div>



    </div>

    

    
      <div class="g-item...

JavaScript

const allCandidates = {};
$('.g-cand').each((i, el) => {
	const name = getName(el);
	allCandidates[name] = {
  	name,
    age: getAge(el),
    title: $(el).find('.g-title').text().trim(),
    quote: $(el).find('.g-quote').text().trim(),
    party: $(el).find('.g-small-note').text().trim(),
    imageUrl: getImageUrl(el),
    info: getCandidateInfo(el),
  };
});

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

function getName(el) {
	const fullString = $(el).find('.g-name').text();
  const parts = fullString.split(',');
	return parts[0].trim();
}

function getAge(el) {
	const fullString = $(el).find('.g-age').text();
  const parts = fullString.split(',');
  return parts[1].trim();
}

function getImageUrl(el) {
	const imageEl = $(el).find('.g-img .g-inner')[0];
  return imageEl.style.backgroundImage;
}

function getCandidateInfo(el) {
	const textEls = $(el).nextUntil('.g-cand');
  const info = [];
	[...textEls].forEach(i => {
    const rawText = $(i).text().trim();
    const rawTextLower = rawText.substring(0, 11).toLowerCase();
    const hasCheckOut = rawTextLower.includes('check out');
    if (hasCheckOut) return;
    let text = rawText;
    const parts = text.split(': ');
    let type = 'standard-info';
    if (parts[0] === 'Signature issues') {
    	type = 'issues';
      text = parts[1];
    }
  	info.push({ text, type });
  });
  
  return info;
 }