How to extract data from a table using JavaScript

Questions & Suggestions
1

Hey Keyboard Maestro Maestros!

I've got a bit of knot I'm trying to untie after searching for how to do this fruitlessly and reading so many forum posts I'm crosseyed.

Essentially, I'm trying to pull out a link that is contained in a tiny 16x16 .svg file that exists in a table (it's right after the word "Published"), and then paste that link into a document.

The search result page where this table exists is behind a sign-in wall, but an anonymized screenshot is below:

Screen_Shot_2020-01-13_at_10_50_23_AM
Screen_Shot_2020-01-13_at_10_50_23_AM.png1424×622 29.5 KB

How can I use KM to pull out that link contained in the tiny .svg file?

Here's the HTML from the search result:

<tr class="m-dashboard__table__row "><td class="res-table__data--multi-select">
  <res-checkbox leader="1578941388046-92948-5" class="res-shim res-style-reset-inner res-style-reset-outer res-checkbox defined">
  <input type="checkbox" class="res-checkbox__native-checkbox" id="1578941388048-70143-7"><label class="res-checkbox__fake-checkbox" for="1578941388048-70143-7" role="checkbox" aria-labelledby="1578941388048-70143-7-label" aria-checked="false" aria-disabled="false" aria-indeterminate="false"><res-icon name="check" size="small" class="res-shim res-style-reset-inner res-style-reset-outer res-icon defined"><svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M13.333 5.832l-6.75 6.3-2.25-2.25" stroke="#020303" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg></res-icon><res-icon name="dash" size="small" style="display: none;" class="res-shim res-style-reset-inner res-style-reset-outer res-icon defined"><svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M5 9h8" stroke="#000" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg></res-icon></label><label class="res-checkbox__label" id="1578941388048-70143-7-label" for="1578941388048-70143-7"></label>
  </res-checkbox>
  </td><td class="m-dashboard__table__icon">    </td> <td class="m-dashboard__table__title" data-heading="Title"><a href="/compose/eabe9869-201e-4b15-ac95-d992710c61fe" rel="external"><span>THE TITLE OF THE THING</span></a></td> <td class="m-dashboard__table__byline" data-heading="Byline">BYLINE OF THE THING</td>  <td class="m-dashboard__table__activity" data-heading="Status"><span class="m-dashboard__table__activity__text"><span class="m-dashboard__table__activity__icon published"></span> Published <span class="m-dashboard__table__activity__link"><a href="THE LINK FOR THE THING" target="_blank"><res-icon size="smaller" name="publish" class="res-shim res-style-reset-inner res-style-reset-outer res-icon defined"><svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><g stroke="#000" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M14.808 3.557L8.6 9.349M14.651 8.08l.157-4.523-4.523-.157M14.6 11.8v2.8H3.4V3.4h3"></path></g></svg></res-icon></a></span> on May 31, 2019 at 5:41pm </span></td>  <td class="m-dashboard__table__actions"><res-button id="eabe9869-201e-4b15-ac95-d992710c61fe" design="default" class="res-shim res-style-reset-inner res-style-reset-outer res-button defined --icon-only --icon-left" role="button"><res-icon size="medium" title="Menu" name="more" animated="false" class="res-shim res-style-reset-inner res-style-reset-outer res-icon defined"><svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><g transform="translate(3 8)" fill="#000" fill-rule="evenodd"><circle cx="1" cy="1" r="1"></circle><circle cx="6" cy="1" r="1"></circle><circle cx="11" cy="1" r="1"></circle></g></svg></res-icon> <button type="button" class="res-button__button">&nbsp;</button></res-button> <res-dropdown for="eabe9869-201e-4b15-ac95-d992710c61fe" placement="left" trigger="click" class="res-shim res-style-reset-inner res-style-reset-outer res-dropdown defined" x-placement="left" style="position: absolute; transform: translate3d(828px, 70px, 0px); top: 0px; left: 0px; will-change: transform;"><button>Copy</button> <button>Archive</button> <button>Move to trash</button>  </res-dropdown></td></tr>

I assume we'd need to use JavaScript to identify and then pull out the data. Then store that data in a variable.

But I'm not sure how to 1) code this in JavaScript, and 2) incorporate this into a macro.

Any help you can share would be incredible. For the time being, I'll keep copy-pasting like a moron.

Thank you!

2

There only seem to be two href links in that html snippet:

"/compose/eabe9869-201e-4b15-ac95-d992710c61fe"

and

"THE LINK FOR THE THING"

would those be the targets you are after ?

3

To be clear, the link is actually in a <span> element:

<span class="m-dashboard__table__activity__link"><a href="THE LINK FOR THE THING" target="_blank">
  
  <res-icon size="smaller" name="publish" class="res-shim res-style-reset-inner res-style-reset-outer res-icon defined">

  <svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
    <g stroke="#000" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
      <path d="M14.808 3.557L8.6 9.349M14.651 8.08l.157-4.523-4.523-.157M14.6 11.8v2.8H3.4V3.4h3"></path>
    </g>
  </svg>
  
  </res-icon>
  </a>
  </span>

So, if you just want the first link:

    var linkElem = document.querySelector('span.m-dashboard__table__activity__link a');
    linkElem.href;

If you want a text list of links (one per line), then this should work:
(untested since you only give us one link in the HTML)

    var linkElemCol = document.querySelectorAll('span.m-dashboard__table__activity__link a');
    var linkArray = Array.from(linkElemCol).map(function(x) {return x.href;});
    linkArray.join('\n');

Put either of these scripts in a Execute a JavaScript in Front Browser action.

Let us know if this works for you.