JSFiddle - React, Tailwind, and code Playground

by denbuzze

HTML

<table border="0" cellpadding="0" cellspacing="0">
            
<tbody><tr id="issue_2161" class="issue even read js-navigation-item navigation-focus">
  <td class="read-status">
    <div class="wrapper">
      <span title="Read" class="mini-icon mini-icon-mail-status read"></span>
    </div>
  </td>

    <td class="select-toggle">
      <span>
        <input type="checkbox" name="issues[]" value="2161">
      </span>
    </td>

  <td class="number">
    #2161
  </td>

  <td class="info">
    <div class="wrapper">

      <h3>
        <a href="/sakaiproject/3akai-ux/pull/2161" class="js-navigation-open">SAKIII-5703 - Investigate which widgets are no longer used and remove th...</a>
          <span class="label labelstyle-ff0000" data-name="Merge Conflict">Merge Conflict</span>
          <span class="label labelstyle-c052ff" data-name="More work needed">More work needed</span>
          <span class="label labelstyle-02e10c" data-name="1.4.0">1.4.0</span>
      </h3>


      <span class="pull-requests">
        <span class="mini-icon mini-icon-pull-request"></span> <a href="/sakaiproject/3akai-ux/pull/2161">Code Attached</a>
      </span>
      <p>by <strong><a href="/nicolaasmatthijs">nicolaasmatthijs</a></strong>
      <time class="js-relative-date" datetime="2012-05-31T08:26:46-07:00" title="2012-05-31 08:26:46">2 days ago</time></p>
    </div>
  </td>
</tr>

            
<tr id="issue_2160" class="issue odd read js-navigation-item">
  <td class="read-status">
    <div class="wrapper">
      <span title="Read" class="mini-icon mini-icon-mail-status read"></span>
    </div>
  </td>

    <td class="select-toggle">
      <span>
        <input type="checkbox" name="issues[]" value="2160">
      </span>
    </td>

  <td class="number">
    #2160
  </td>

  <td class="info">
    <div class="wrapper">
<a href="/christianv" class="assignee-bit tooltipped leftwards yours" title="Assigned to christianv">        <span class="assignee-wrapper">
          <img height="16"...

JavaScript

var sakaiRegex = /(SAKIII|KERN)-\d+/g;

var passRequest = function(config, callback) {
    var target = config.event.currentTarget;
    if (target.readyState === 4 && target.status === 200) {
        var jsonobj = JSON.parse(target.responseText);
        if (jsonobj.query.results) {
            var issue = jsonobj.query.results.json;
            callback({
                key: issue.key,
                status: issue.fields.status.value.name
            });
        }
    }
};

var makeRequest = function(config, callback) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = function(event) {
        passRequest({
            event: event
        }, callback);
    };
    httpRequest.open('GET', config.url);  
    httpRequest.send();
};

var getJiraIssue = function(config, callback) {
    var url = "http://query.yahooapis.com/v1/public/yql?q=SELECT%20key%2C%20fields.status.value.name%20FROM%20json%20WHERE%20url%3D'https%3A%2F%2Fjira.sakaiproject.org%2Frest%2Fapi%2F2.0.alpha1%2Fissue%2F" + config.issue + "'&format=json&callback=";
    makeRequest({
        url: url
    }, callback);
};


var githubIssues = document.querySelectorAll('.issue');
for (var i = 0; i < githubIssues.length; i++) {
    var githubIssue = githubIssues[i];
    var title = githubIssue.querySelector(".info .wrapper h3 a");
    var titleText = title.innerHTML;
    sakaiRegex.lastIndex = 0;
    var regexArray = sakaiRegex.exec(titleText);
    if (regexArray) {
        var sakiii = regexArray[0];
        githubIssue.dataset.key = sakiii;
        getJiraIssue({
            issue: sakiii
        }, function (issue) {
            console.log(issue.key + ' ' + issue.status);                        
        });
    }
}