sql.js in HTML: run a parameterized reading query after the engine loads

The page has loaded, but its SQLite engine has not. Wait for initSqlJs() before enabling a query button, and bind a selected value instead of building SQL from an input string. A visible table should represent the current query, not the last successful query after a new one failed.

Use a fictional stock reading with three rows: North has six units, South has four, and North has five. Selecting North should return two rows totaling eleven units. All three rows total fifteen. These are supplied exercise values, not a connection to a stock system.

Open the complete example · Download the full HTML source

Load the engine deliberately

The official sql.js README describes asynchronous initialization and the relationship between the JavaScript loader and its WebAssembly binary. For a distribution with a separate binary, supply locateFile so the loader can find the matching asset. Keep both artifacts from the same chosen release.

Do not present a network script URL as a self-contained file. The README also describes an inline WebAssembly distribution; check that the release you deliver actually contains it before choosing that route. Engine initialization failure needs its own visible message and a disabled query action.

Bind a value, then release the statement

Once the chosen browser loader has initialized, a small fixed query can use a prepared statement:

const statement = db.prepare(
  'SELECT id, units FROM stock WHERE location = ? ORDER BY id'
);
try {
  statement.bind([selectedLocation]);
  const rows = [];
  while (statement.step()) rows.push(statement.getAsObject());
  showRows(rows);
} finally {
  statement.free();
}

The documentation demonstrates prepared statements, binding, stepping through results, and freeing the statement. showRows is your page's rendering function; it must be supplied by the application. Use literal text for cell values rather than interpreting them as HTML.

Binding a location is different from accepting arbitrary SQL. Keep the query fixed for this reading task. Give a location with no matches an explicit zero-row result; do not restore the North rows because an empty table looks inconvenient.

Retire old results when the selection changes

Clear the displayed rows and total when the selected location changes. Show “Run the query for this location” until the new result is ready. If execution throws, clear the readout and show the error state. An old eleven-unit total must not remain labeled as the current South result.

For the supplied values, independently reconcile North as six plus five and South as four. Keep row count separate from unit total. Two rows is not two units.

The existing SQLite visualizer displays captured native results and explicitly does not initialize sql.js. This recipe addresses the browser engine and query lifecycle. It does not establish the freshness of an uploaded database or resolve a live database's sidecar files.

Keep the fixed SQL, source rows, and chosen engine artifacts with the reading copy in NOS. A reviewer should be able to identify which location produced the table before discussing a change to the quantities.