index.html

<!doctype html>
<html lang="en" data-theme="dark">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="JPS" />
    <title>JPS</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css" />
  </head>

  <body>
    <script src="sql-wasm/sql-wasm.js"></script>

    <script defer>
      const getDatabase = async () => {
        const SQL = await initSqlJs({
          locateFile: (file) => `sql-wasm/${file}`,
        });
        const gzipFile = await fetch('data/database.db.gz');
        const gzipBlob = await gzipFile.blob();
        const gzipStream = new DecompressionStream('gzip');
        const dbBlob = await new Response(gzipBlob.stream().pipeThrough(gzipStream)).blob();
        const dbBuffer = await dbBlob.arrayBuffer();
        const dbArray = new Uint8Array(dbBuffer);
        const db = new SQL.Database(dbArray);
        return db;
      };

      const getDataFromDb = (db, sql) => {
        const data = [];
        const select = db.exec(sql);
        if (select.length > 0) {
          const { columns, values } = select[0];
          values.forEach((row) => {
            const obj = {};
            row.forEach((value, index) => {
              obj[columns[index]] = value;
            });
            data.push(obj);
          });
        }
        return data;
      };

      (async () => {
        const db = await getDatabase();
        const data = getDataFromDb(
          db,
          `SELECT orden, numero, COUNT(numero) as cantidad FROM monazos GROUP BY orden, numero`,
        );
        console.info(data);
      })();
    </script>
  </body>
</html>