JS table praser

by slawe

HTML

<table class="h7vnx2-2 eppVuK cmc-table  "><colgroup><col style="width: 40px; min-width: auto;"><col style="width: 200px; min-width: auto;"><col><col><col><col><col><col><col><col></colgroup><thead><tr><th class="stickyTop">#</th><th class="stickyTop"><div class="s8fs2i-0 bOfkjI"><div class="s8fs2i-1 gbtfIe"><p class="sc-1eb5slv-0 iKUzJY" font-size="0" color="text">Name</p></div></div></th><th class="stickyTop" style="text-align: right;"><div class="s8fs2i-0 pEXWP"><div class="s8fs2i-1 gbtfIe"><span class="icon-Caret-down" style="margin-right: 4px;"></span><p class="sc-1eb5slv-0 iKUzJY" font-size="0" color="text"><span>Volume<span class="lsid7u-0 sc-9l2tpq-4 iELTZL">24h</span></span></p></div></div></th><th class="stickyTop"><div class="s8fs2i-0 pEXWP"><div class="s8fs2i-1 gbtfIe"><p class="sc-1eb5slv-0 iKUzJY" font-size="0" color="text">Est. Market Cap</p></div></div></th><th class="stickyTop"><div class="s8fs2i-0 pEXWP"><div class="s8fs2i-1 gbtfIe"><p class="sc-1eb5slv-0 iKUzJY" font-size="0" color="text">Floor Price</p></div></div></th><th class="stickyTop"><div class="s8fs2i-0 pEXWP"><div class="s8fs2i-1 gbtfIe"><p class="sc-1eb5slv-0 iKUzJY" font-size="0" color="text"><span>Avg. Price<span class="lsid7u-0 sc-9l2tpq-4 iELTZL">24h</span></span></p></div></div></th><th class="stickyTop"><div class="s8fs2i-0 pEXWP"><div class="s8fs2i-1 gbtfIe"><p class="sc-1eb5slv-0 iKUzJY" font-size="0" color="text"><span>Sales<span class="lsid7u-0 sc-9l2tpq-4 iELTZL">24h</span></span></p></div></div></th><th class="stickyTop"><div class="s8fs2i-0 pEXWP"><div class="s8fs2i-1 gbtfIe"><p class="sc-1eb5slv-0 iKUzJY" font-size="0" color="text">Assets</p></div></div></th><th class="stickyTop" style="text-align: right;"><div class="s8fs2i-0 pEXWP"><div class="s8fs2i-1 gbtfIe"><p class="sc-1eb5slv-0 iKUzJY" font-size="0" color="text">Owners</p></div></div></th><th class="stickyTop" style="text-align: right;"><div class="s8fs2i-0 pEXWP"><div class="s8fs2i-1 gbtfIe"><p...

JavaScript

var table = document.querySelector("table");
var output = document.querySelector("pre");
var data = parseTable(table);

console.log(data);
      
/**
 * generates factory functions to convert table rows to objects,
 * based on the titles in the table's <thead>
 * @param  {Array<String>} headings the values of the table's <thead>
 * @return {(row: HTMLTableRowElement) => Object} a function that takes a table row and spits out an object
 */
function mapRow(headings) {
  return function mapRowToObject({ cells }) {
    return [...cells].reduce(function(result, cell, i) {
      const input = cell.querySelector("input,select");
      var value;

      if (input) {
        value = input.type === "checkbox" ? input.checked : input.value;
      } else {
        value = cell.innerText;
      }

      return Object.assign(result, { [headings[i]]: value });
    }, {});
  };
}

/**
 * given a table, generate an array of objects.
 * each object corresponds to a row in the table.
 * each object's key/value pairs correspond to a column's heading and the row's value for that column
 *
 * @param  {HTMLTableElement} table the table to convert
 * @return {Array<Object>}       array of objects representing each row in the table
 */
function parseTable(table) {
  var headings = [...table.tHead.rows[0].cells].map(
    heading => heading.innerText
  );

  return [...table.tBodies[0].rows].map(mapRow(headings));
}