Solution
We create a table variable and populate it with data extracted from a table on a website, using the
ConnectHTML command in combination with JavaScript.
Example
The Website contains a list of countries, with population and further data:
We display it in the following form:
GuiXT Script
GuiXT
// Clear the screen
del (0,0) (20,200)
// Display a WebView containing the table from which we extract data
WebView (8.1,19.3) (29.2,77.4) "https://www.geonames.org/statistics/" _
name="GeoView" -closeonhide
// CreateTable creates a table variable with our needed columns
CreateTable V[GeoTable] rank names country countrycode area _
namesperkm2 population namesperonethousand
// CopyText reads our javascript code and converts it
// into text and stores it into the text variable code
CopyText fromFile="read_table.js" toText="code"
// Now we execute the javascript code on the webview named "GeoView"
ConnectHTML run="code" runResult="result" name="GeoView"
// Now we copy the results into our table variable
CopyText fromText="result" toTable="V[GeoTable]"
// To show our results on screen we create a table with the needed
// columns by naming the table the same as our table variable
// we retrieve the data from the variable
Table (8,95) (29,184) title="My table" _
name="GeoTable" rows="&V[GeoTable.rowcount]"
Column "Rank" size=16 name="rank"
Column "Names" size=16 name="names"
Column "Country" size=16 name="country"
Column "Countrycode" size=16 name="countrycode"
Column "Area" size=16 name="area"
Column "Names per km²" size=16 name="namesperkm2"
Column "Population" size=16 name="population"
Column "Names per 1000" size=16 name="namesperonethousand"
JavaScript - read_table.js
JavaScript
// Retrieve the table element from the sample website
const table = document.getElementById("statistictable");
// Retrieve the table body
const body = table.tBodies[0]; // first (and usually only) tbody element
// Prepare an array to collect the extracted data for GuiXT
const table_data = [];
for (const row of body.rows) {
for (const cell of row.cells) {
table_data.push(cell.innerText);
}
}
// Return the result as string
table_data.join("\r\n");