CSV export of details table in compact view

[tidoust]

From time to time, one will want to extract the results of a questionnaire and work on them in a spreadsheet. The "Details" table in the compact results view is almost perfect for that, but cannot be directly copied and pasted onto a spreadsheet, as far as I can tell.

Main problem is that comments provided in response to some questions may contain newlines. When that happens, the spreadsheet will create artificial rows, requiring to merge the cells manually afterwards.

Another minor issue is that it's hard to select all the content of the table at once ("Select all" will select all the contents of the page in most browsers).

Also, it would be good to have a raw export view where the family name does not end up with " (impersonate)" (but that one is easy to get rid of).

Could a "CSV export" button be provided to ease export of results? Or is there a better way that I missed?

[tidoust]

FWIW, in the meantime, here is a JavaScript function that can be run against a WBS compact results page to get a CSV export:

const getDetailsTableAsCSV = () => {
  // Field separator may be tab, ",", ";", etc.
  const fieldSeparator = ',';

  // Line separator needs to be "\r" for Google Sheets to process multi-line
  // comments correctly
  const lineSeparator = '\r';

  // Wraps a (possibly multi-line) string in double quotes
  const quoteStr = str => '"' + str.replace(/"/g, '""') + '"';

  // Returns the value of an attribute parsed as integer
  const getIntAttr = (el, attr) => {
    if (el.getAttribute(attr)) {
      try {
        return parseInt(el.getAttribute(attr), 10);
      }
      catch (err) {
        return 0;
      }
    }
  };

  // Adds a header label, taking into account headers that span multiple columns
  const addHeader = th => {
    let res = quoteStr(th.innerText);
    let colspan = getIntAttr(th, 'colspan');
    while (colspan > 1) {
      res += fieldSeparator;
      colspan--;
    }
    return res;
  };

  // Adds a row
  const addRow = tr =>
    [...tr.querySelectorAll('th,td')].map(td => quoteStr(td.innerText)).join(fieldSeparator);

  // Details table to parse
  let table = document.querySelector('#mainTable');

  // Generate the CVS export
  // TODO: the second header row, which typically exists when the questionnaire
  // contains ranking questions, would need to be exported as well
  return []
    .concat([...table.querySelectorAll('thead > tr:first-child > th')].map(addHeader).join(fieldSeparator))
    .concat([...table.querySelectorAll('tbody > tr')].map(addRow))
    .join(lineSeparator);
};

To use it:

1. Copy and paste the code above in the console pane associated with the results page
2. Run console.log(getDetailsTableAsCSV())
3. Copy the result to some export.csv file
4. Import the CSV file in a Google Sheet

Note import does not work in Excel because it does not seem to support multilines.