Skip to content

Commit 53cbc31

Browse files
snakewasnakewa
committed
Initial commit: SQL INSERT ➜ JSON + HTML Table
0 parents  commit 53cbc31

4 files changed

Lines changed: 980 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
# SQL INSERT ➜ JSON + HTML Table
2+
3+
A lightweight web tool to convert SQL INSERT statements into JSON and a rendered HTML table. Supports multiple statements, schema inference from CREATE TABLE, inline validation, JSON previews, downloads, and more.
4+
5+
## Features
6+
7+
- Robust parsing of `INSERT INTO ... VALUES (...), (...);` across multiple tables
8+
- Optional column list: supports `INSERT INTO table VALUES (...)` and infers columns
9+
- Schema-aware: extracts column names from `CREATE TABLE` blocks when present
10+
- Type normalization: numbers, booleans, `NULL`, quoted strings
11+
- Multiple outputs: JSON (grouped by table or flat array) and HTML tables
12+
- Inline messages: errors and warnings shown in-page
13+
- Row-level mismatch indicators when values count ≠ columns count
14+
- JSON cell handling:
15+
- Detects JSON-like strings and renders preview or expanded view
16+
- Click “View” to open a modal with pretty-printed JSON
17+
- Toggle to expand JSON values by default
18+
- Copy/Download:
19+
- Copy JSON to clipboard
20+
- Download JSON (grouped/flat to match current mode)
21+
- Download CSV (always flat, includes `__table` column)
22+
23+
## Getting Started
24+
25+
1. Open `index.html` in your browser (no build step required).
26+
2. Paste SQL in the textarea. You can include `CREATE TABLE` statements and multiple `INSERT` statements.
27+
3. Click `Convert`.
28+
4. Use the Output selector to switch between Grouped and Flat JSON.
29+
5. Copy/Download results or inspect the HTML tables.
30+
31+
## Example
32+
33+
```sql
34+
CREATE TABLE products (
35+
id INT PRIMARY KEY,
36+
name TEXT,
37+
price DECIMAL(10,2),
38+
stock INT
39+
);
40+
41+
INSERT INTO products VALUES
42+
(1, 'Laptop', 999.99, 5),
43+
(2, 'Mouse', 24.99, 10);
44+
```
45+
46+
Produces grouped JSON:
47+
```json
48+
{
49+
"products": [
50+
{ "id": 1, "name": "Laptop", "price": 999.99, "stock": 5 },
51+
{ "id": 2, "name": "Mouse", "price": 24.99, "stock": 10 }
52+
]
53+
}
54+
```
55+
56+
## UI Controls
57+
58+
- Convert button: parse and render
59+
- Output: `Grouped by Table` or `Flat Array`
60+
- Expand JSON values: when on, JSON-like cell strings render expanded inline
61+
- Copy JSON: copies current JSON view (grouped or flat) to clipboard
62+
- Download JSON: downloads current JSON view
63+
- Download CSV: downloads a flat CSV (includes `__table` column)
64+
65+
## Validation
66+
67+
- If the number of values in a tuple does not match the number of columns:
68+
- A warning is shown inline
69+
- Missing values are set to `null`
70+
- Extra values are ignored
71+
- The affected table row is marked with a `mismatch` badge
72+
73+
## Notes & Limitations
74+
75+
- Supported now:
76+
- `INSERT INTO ... (cols) VALUES (...), (...);`
77+
- `INSERT INTO ... VALUES (...), (...);` (columns inferred or from schema)
78+
- `CREATE TABLE` simple column lists (+ skipping constraints)
79+
- Not supported yet: `INSERT ... SELECT`, `ON CONFLICT/RETURNING`, complex vendor-specific syntax, deep type parsing in `CREATE TABLE`.
80+
- JSON-like detection is best-effort on strings that look like `{...}` or `[...]` and parse via `JSON.parse`.
81+
82+
## Development
83+
84+
- All logic is in `script.js`; UI is in `index.html`.
85+
- No external build tools required. Bootstrap CDN is used for styling.
86+
87+
## License
88+
89+
MIT

‎README.zh.md‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
# SQL INSERT ➜ JSON 与 HTML 表格
2+
3+
一个轻量级 Web 工具，用于将 SQL INSERT 语句转换为 JSON 与可视化 HTML 表格。支持多语句、从 CREATE TABLE 推断列名、内联校验、JSON 预览、下载等功能。
4+
5+
## 功能特点
6+
7+
- 可靠解析 `INSERT INTO ... VALUES (...), (...);`，支持多表多语句
8+
- 可选列清单：支持 `INSERT INTO table VALUES (...)` 并自动推断列名
9+
- 读取表结构：可从 `CREATE TABLE` 提取列名（自动跳过约束）
10+
- 类型归一化：数字、布尔、`NULL`、引号字符串
11+
- 多种输出：JSON（按表分组或扁平数组）与 HTML 表格
12+
- 内联消息：错误与警告在页面内显示
13+
- 行级不匹配标记：当值数量 ≠ 列数量时在表格行旁显示“mismatch”徽标
14+
- JSON 单元格处理：
15+
- 识别 JSON 字符串并展示预览或展开
16+
- 点击“View”在弹窗中显示格式化 JSON
17+
- 提供“默认展开 JSON 值”开关
18+
- 复制/下载：
19+
- 一键复制当前 JSON
20+
- 下载 JSON（与当前输出模式一致：分组/扁平）
21+
- 下载 CSV（始终为扁平数据，含 `__table` 列）
22+
23+
## 使用方法
24+
25+
1. 直接用浏览器打开 `index.html`（无需构建）。
26+
2. 在文本框中粘贴 SQL，可包含 `CREATE TABLE` 与多个 `INSERT`。
27+
3. 点击“Convert”。
28+
4. 用“Output”选择器在“按表分组 / 扁平数组”之间切换。
29+
5. 可复制/下载结果，或查看生成的表格。
30+
31+
## 示例
32+
33+
```sql
34+
CREATE TABLE products (
35+
id INT PRIMARY KEY,
36+
name TEXT,
37+
price DECIMAL(10,2),
38+
stock INT
39+
);
40+
41+
INSERT INTO products VALUES
42+
(1, 'Laptop', 999.99, 5),
43+
(2, 'Mouse', 24.99, 10);
44+
```
45+
46+
分组 JSON：
47+
```json
48+
{
49+
"products": [
50+
{ "id": 1, "name": "Laptop", "price": 999.99, "stock": 5 },
51+
{ "id": 2, "name": "Mouse", "price": 24.99, "stock": 10 }
52+
]
53+
}
54+
```
55+
56+
## 界面说明
57+
58+
- Convert：解析并渲染
59+
- Output：`Grouped by Table`（按表分组）或 `Flat Array`（扁平数组）
60+
- Expand JSON values：开启后，JSON 字符串在表格中默认展开
61+
- Copy JSON：复制当前 JSON（与输出模式一致）
62+
- Download JSON：下载当前 JSON
63+
- Download CSV：下载扁平 CSV（包含 `__table` 列）
64+
65+
## 校验逻辑
66+
67+
- 若某行的值数量与列数量不一致：
68+
- 在页面显示警告
69+
- 缺失值填充为 `null`
70+
- 多余的值被忽略
71+
- 在对应的表格行展示 `mismatch` 徽标
72+
73+
## 注意事项
74+
75+
- 当前支持：
76+
- `INSERT INTO ... (cols) VALUES (...), (...);`
77+
- `INSERT INTO ... VALUES (...), (...);`（列名来自表结构或按顺序自动命名）
78+
- 基础 `CREATE TABLE` 列定义（自动跳过约束）
79+
- 暂不支持：`INSERT ... SELECT`、`ON CONFLICT/RETURNING`、复杂的方言语法、`CREATE TABLE` 中复杂类型的深度解析等。
80+
- JSON 检测基于 `{...}`/`[...]` 外观并尝试 `JSON.parse`。
81+
82+
## 开发
83+
84+
- 逻辑在 `script.js`，界面在 `index.html`。
85+
- 无需构建工具；样式使用 Bootstrap CDN。
86+
87+
## 许可
88+
89+
MIT

‎index.html‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>SQL to JSON/Table Converter</title>
7+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
8+
<style>
9+
body {
10+
padding: 20px;
11+
max-width: 1200px;
12+
margin: 0 auto;
13+
}
14+
.output-section {
15+
margin-top: 20px;
16+
padding: 15px;
17+
border: 1px solid #ddd;
18+
border-radius: 5px;
19+
}
20+
pre {
21+
background-color: #f8f9fa;
22+
padding: 10px;
23+
border-radius: 5px;
24+
max-height: 300px;
25+
overflow-y: auto;
26+
}
27+
h2 {
28+
margin-top: 30px;
29+
margin-bottom: 15px;
30+
}
31+
table {
32+
margin-top: 15px;
33+
}
34+
</style>
35+
</head>
36+
<body>
37+
<div class="container">
38+
<h1 class="mb-4">SQL to JSON/Table Converter</h1>
39+
40+
<!-- Section 1: Input & Actions -->
41+
<section class="mb-4">
42+
<h2 class="h4 mb-3">Input & Actions</h2>
43+
<div class="mb-3">
44+
<label for="sqlInput" class="form-label">Paste your SQL here (you can include CREATE TABLE and multiple INSERT statements):</label>
45+
<textarea class="form-control" id="sqlInput" rows="8" placeholder="CREATE TABLE ...;&#10;INSERT INTO table_name (col1, col2, ...) VALUES (...), (...);"></textarea>
46+
</div>
47+
<div class="d-flex align-items-center gap-2 mb-2">
48+
<button id="convertBtn" class="btn btn-primary">Convert</button>
49+
<div class="ms-auto d-flex align-items-center gap-2">
50+
<label for="outputMode" class="form-label m-0">Output:</label>
51+
<select id="outputMode" class="form-select form-select-sm" style="width: 180px;">
52+
<option value="grouped" selected>Grouped by Table</option>
53+
<option value="flat">Flat Array</option>
54+
</select>
55+
<button id="downloadJsonBtn" class="btn btn-outline-secondary btn-sm" type="button">Download JSON</button>
56+
<button id="downloadCsvBtn" class="btn btn-outline-secondary btn-sm" type="button">Download CSV</button>
57+
</div>
58+
</div>
59+
<div id="messages" class="mb-0"></div>
60+
</section>
61+
62+
<hr/>
63+
64+
<!-- Section 2: Output - JSON Actions -->
65+
<section class="mb-4">
66+
<h2 class="h4 mb-3">Output: JSON Actions</h2>
67+
<div class="d-flex align-items-center justify-content-between mb-2">
68+
<div class="d-flex align-items-center gap-2">
69+
<div class="form-check form-switch">
70+
<input class="form-check-input" type="checkbox" id="expandJsonToggle">
71+
<label class="form-check-label" for="expandJsonToggle">Expand JSON values</label>
72+
</div>
73+
</div>
74+
<div class="d-flex align-items-center gap-2">
75+
<button id="viewJsonBtn" class="btn btn-sm btn-outline-secondary" type="button">View JSON</button>
76+
<button id="copyJsonBtn" class="btn btn-sm btn-outline-primary" type="button">Copy JSON</button>
77+
</div>
78+
</div>
79+
<div id="output" class="d-none">
80+
<div class="output-section d-none">
81+
<pre id="jsonOutput"></pre>
82+
</div>
83+
</div>
84+
</section>
85+
86+
<hr/>
87+
88+
<!-- Section 3: Output - HTML Table -->
89+
<section class="mb-4">
90+
<div class="d-flex align-items-center justify-content-between mb-2">
91+
<h2 class="h4 m-0">Output: HTML Table</h2>
92+
<div class="d-flex align-items-center gap-2">
93+
<button id="compareBtn" class="btn btn-sm btn-outline-secondary" type="button">Compare Selected</button>
94+
<button id="generateUpdateBtn" class="btn btn-sm btn-outline-primary" type="button">Generate UPDATEs</button>
95+
</div>
96+
</div>
97+
<div class="output-section">
98+
<div id="tableOutput"></div>
99+
</div>
100+
</section>
101+
102+
<!-- Action Modal (Diff / SQL Output) -->
103+
<div class="modal fade" id="actionModal" tabindex="-1" aria-labelledby="actionModalLabel" aria-hidden="true">
104+
<div class="modal-dialog modal-lg modal-dialog-scrollable">
105+
<div class="modal-content">
106+
<div class="modal-header">
107+
<h5 class="modal-title" id="actionModalLabel">Action Result</h5>
108+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
109+
</div>
110+
<div class="modal-body">
111+
<pre id="actionModalBody" class="mb-0"></pre>
112+
</div>
113+
<div class="modal-footer">
114+
<button id="actionCopyBtn" type="button" class="btn btn-outline-primary">Copy</button>
115+
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
116+
</div>
117+
</div>
118+
</div>
119+
</div>
120+
121+
<!-- JSON Modal -->
122+
<div class="modal fade" id="jsonModal" tabindex="-1" aria-labelledby="jsonModalLabel" aria-hidden="true">
123+
<div class="modal-dialog modal-lg modal-dialog-scrollable">
124+
<div class="modal-content">
125+
<div class="modal-header">
126+
<h5 class="modal-title" id="jsonModalLabel">JSON Value</h5>
127+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
128+
</div>
129+
<div class="modal-body">
130+
<pre id="jsonModalBody" class="mb-0"></pre>
131+
</div>
132+
<div class="modal-footer">
133+
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
134+
</div>
135+
</div>
136+
</div>
137+
</div>
138+
139+
<script src="script.js"></script>
140+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
141+
</body>
142+
</html>

0 commit comments

Comments
 (0)