Differences

This shows you the differences between two versions of the page.

--- reinforcedlearningwithaisupport:sqliteinthebrowserpoc [2025/03/08 17:11] – created gedbadmin
+++ reinforcedlearningwithaisupport:sqliteinthebrowserpoc [2025/04/10 13:26] (current) – [The code] gedbadmin
@@ Line 546: / Line 546: @@
 This is how AI will boost developer productivity: by accelerating our learning.
+====== The code ======
+If you want to take a look at what has been crated so far, here it is:
+I've taken out the large Base64 string.  The full string is available [[>SqliteWasmBase64|here]] for you to copy and paste in.
+<code html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>In-Memory SQLite</title>
+</head>
+<body>
+    <h1>SQLite In-Memory DB</h1>
+    <textarea id="sqlInput" rows="5" cols="100">
+DROP TABLE IF EXISTS test;
+CREATE TABLE test (id INTEGER PRIMARY KEY, name TEXT);
+INSERT INTO test (name) VALUES ('Alice'), ('Bob');
+SELECT * FROM test;
+    </textarea>
+    <button id="runQuery">Run Query</button>
+    <pre id="output"></pre>
+    <script src="lib/sql-wasm.js"></script>
+    <script>
+        const base64wasm = "BASE64_ENCODING"; --
+        const binaryString = atob(base64wasm);
+        const bytes = new Uint8Array(binaryString.length);
+        for (let i = 0; i < binaryString.length; i++) {
+            bytes[i] = binaryString.charCodeAt(i);
+        }
+        (async () => {
+            // Initialize sql.js using the in-memory WASM binary
+            const sql = await initSqlJs({
+                locateFile: () => {
+                    // Create a blob for the binary and generate a URL
+                    const blob = new Blob([bytes], { type: "application/wasm" });
+                    return URL.createObjectURL(blob);
+                }
+            });
+            const db = new sql.Database(); // In-memory SQLite DB
+            document.getElementById('runQuery').addEventListener('click', () => {
+                const sqlQuery = document.getElementById("sqlInput").value;
+                const result = db.exec(sqlQuery);
+                document.getElementById('output').innerHTML = resultToHTMLTable(result);
+            });
+        })();
+        function resultToHTMLTable(result) {
+            if (!result || result.length === 0) {
+                return "<p>No results found.</p>";
+            }
+            // Use the first result set (if there are multiple)
+            const data = result[0];
+            let html = "<table border='1'><thead><tr>";
+            // Create header row
+            data.columns.forEach(col => {
+                html += `<th>${col}</th>`;
+            });
+            html += "</tr></thead><tbody>";
+            // Create data rows
+            data.values.forEach(row => {
+                html += "<tr>";
+                row.forEach(cell => {
+                html += `<td>${cell}</td>`;
+                });
+                html += "</tr>";
+            });
+            html += "</tbody></table>";
+            return html;
+        }
+    </script>
+</body>
+</html>
+</code>