Snippet to convert html table to json (to be used with google chrome or similiar)

table-to-json.js

function tableToJson(table) {
    var data = [];

    // first row needs to be headers
    var headers = [];
    for (var i=0; i<table.rows[0].cells.length; i++) {
        headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,'');
    }

    // go through cells
    for (var i=1; i<table.rows.length; i++) {

        var tableRow = table.rows[i];
        var rowData = {};

        for (var j=0; j<tableRow.cells.length; j++) {

            rowData[ headers[j] ] = tableRow.cells[j].innerHTML;

        }

        data.push(rowData);
    }       

    return data;
}

JSON.stringify(tableToJson($0));

tnx

function getJSON(table) {  
  // thead
  const thead = Array.from(table.tHead.rows[0].children).map((el) => el.textContent);

  // tbody
  const tbody = Array.from(table.tBodies[0].rows).map((row) =>
    Array.from(row.cells).map((cell) => cell.textContent)
  );

  const headStr = thead.join(',') + '\n';
  const bodyStr = tbody.reduce((pre, row) => {
    pre += row.join(',');
    pre += '\n'
    return pre;
  }, '\n');
  
  return {
    // table: tbody.unshift(thead),
    csv: headStr + bodyStr,
    table: [thead].concat(tbody),
    thead,
    tbody
  };
}

// Parse HTML table element to JSON array of objects
function parseHTMLTableElem(tableEl) {
    const columns = Array.from(tableEl.querySelectorAll('th')).map(it => it.textContent)
    const rows = tableEl.querySelectorAll('tbody > tr')
    return Array.from(rows).map(row => {
        const cells = Array.from(row.querySelectorAll('td'))
        return columns.reduce((obj, col, idx) => {
            obj[col] = cells[idx].textContent
            return obj
        }, {})
    })
}

@GavinRay97 Excellent! thx

nice one

Very nice example, but only works on tables that we are expecting to correctly have used a table with th cells.
If we are expecting a table to have a "header row" but it does not use th cells for this we need to update the code.
Using @GavinRay97's original example this enhances it to work with tables where we aren't sure if they will have th cells.
Usage: parseHTMLTableElem(document.getElementById('first-table'), false OR true);
Return: {'headers: [], 'rows':[]}

// Parse HTML table element to JSON array of objects
function parseHTMLTableElem( tableEl, expectingHeaderRow ) {
	var columns = Array.from( tableEl.querySelectorAll( 'th' ) ).map( it => it.textContent );
	var rows = Array.from( tableEl.querySelectorAll( 'tbody > tr' ) );
	// must check for table that has no th cells, but only if we are told to "expectingHeaderRow"
	if ( columns.length == 0 && expectingHeaderRow ) {
		// get columns for a non-th'd table
		columns = Array.from( tableEl.querySelectorAll( 'tbody > tr' )[ 0 ].children ).map( it => it.textContent )
		// must remove first row as it is the header
		rows.shift();
	}
	const returnJson = {
		'headers': columns,
		'rows': rows.map( row => {
			const cells = Array.from( row.querySelectorAll( 'td' ) )
			return columns.reduce( ( obj, col, idx ) => {
				obj[ col ] = cells[ idx ].textContent
				return obj
			}, {} )
		} )
	};
	// if we were expecting a header row with th cells lets see if we got it
	// if we got nothing lets try looking for a regular table row as the header
	if ( !expectingHeaderRow && returnJson.headers.length == 0 && ( returnJson.rows[ 0 ] && Object.keys( returnJson.rows[ 0 ] ).length === 0 ) ) {
		return parseHTMLTableElem( tableEl, true );
	}
	return returnJson;
}