Trying to pull data from a table using jQuery

Just to give a background of the question, I am trying to pull data from an html website which was made using tables. I have managed to pull most of them but there’s just one thing which is troubling my brains. Maybe I need a break from work?

I have included all the code in a fiddle which can be found here. https://jsfiddle.net/ex1j6gr4/

Basically I am trying to pull the article date and author from that particular . So I am looping through the in that and getting the element which has the date and the author using certain keywords. Using font:nth-child is not possible because not all the count of tag is not the same in every page. (You can see two empty ones in the jsfiddle table which was a mistake)

For the date, I have made an array of the month names and its easy to pull through that.

For the author, I am detecting the first word of that element’s text which is “By” and its doing its job as well.

However the problem I am facing is when I am using that element outside the “.each” function which is returning the value as “undefined”. Here’s the jQuery code I am using.

function monthNames(string, keywords) {
    return string.split(/b/).some(Array.prototype.includes.bind(keywords));
}

var months = ["Jan.", "Feb.", "March", "April", "May", "June", "July", "Aug.", "Sept.", "Oct.", "Nov.", "Dec."];

jQuery('td').find('font').each(function() {
  var curtext = jQuery(this).text();
  var has_date  = monthNames(curtext, months);
  if (has_date == true) {
    var post_date = curtext;
    jQuery('#current-date-text').html(post_date);
  }
});

jQuery('#current-outside-date').html(post_date);

jQuery('td').find('font').each(function() {
  var curtext = jQuery(this).text();
  var i = curtext.indexOf(' ');
  var first_word = curtext.substring(0, i);
  if (first_word == 'By') {
    var author = curtext;
    var author = author.substr(author.indexOf(" ") + 1);
    jQuery('#current-author-text').html(author);
  }
});

jQuery('#current-outside-author').html(author);

Any help would be greatly appreciated !

Answer

You needed to define your variables outside of your functions (you had 2 loops and the second was trying to reference variables defined outside of it’s scope). Here I’ve combined the 2 loops, removed many of the var – you only need to define that once and then you can reference the actual variable after that.

Finally, jQuery couldn’t find ('td') unless it was actually sitting inside a <table> tag. I didn’t have a function you were referencing so I put in a little forEach loop to test for the month.

jQuery(document).ready(function() {
  var months = ["Jan.", "Feb.", "March", "April", "May", "June", "July", "Aug.", "Sept.", "Oct.", "Nov.", "Dec."];
  var post_date, author, curtext, has_date, first_word

  jQuery('td font').each(function() {
    curtext = jQuery(this).text();
    has_date = false
    curtext.split(" ").forEach(w => {
      if (months.includes(w)) has_date = true;
    })

    if (has_date) {
      post_date = curtext;
      jQuery('#current-date-text').html(post_date);
    }


    jQuery('#current-outside-date').html(post_date);

    curtext = jQuery(this).text();
    var i = curtext.indexOf(' ');
    first_word = curtext.substring(0, i);
    if (first_word == 'By') {
      author = curtext;
      author = author.substr(author.indexOf(" ") + 1);
      jQuery('#current-author-text').html(author);
    }
  });

  jQuery('#current-outside-author').html(author);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td width="100%">
      <font size="4" face="Times New Roman,Georgia,Times"><b>Some text over here</b></font>
      <font size="2" face="Times New Roman,Georgia,Times"></font>
      <font size="3" face="Times New Roman,Georgia,Times"><b>Some random text here again</b></font>
      <font size="2" face="Times New Roman,Georgia,Times"></font>
      <font size="3" face="Times New Roman,Georgia,Times">July 16, 2001</font>
      <font size="3" face="Times New Roman,Georgia,Times">By Author name</font>
    </td>
  </tr>
</table>

<p id="current-date-text"></p>
<p id="current-outside-date"></p>
<p id="current-author-text"></p>
<p id="current-outside-author"></p>