JSON & Data Tools: จัดรูปแบบ ตรวจสอบ แปลง และค้นหา JSON โดยไม่ต้องเขียนโค้ด

JSON คือภาษากลางของ APIs, ไฟล์ configuration, ฐานข้อมูล, และการแลกเปลี่ยนข้อมูล นักพัฒนาต้องทำงานกับมันอยู่ตลอดเวลา — ไม่ว่าจะจัดรูปแบบ ตรวจสอบความถูกต้อง แปลงรูปแบบ หรือดึงข้อมูลออกมา นี่คือคู่มือครบจบสำหรับเครื่องมือที่จัดการทุก task เกี่ยวกับ JSON ซึ่งทำงานได้ทั้งหมดในเบราว์เซอร์ของคุณ

1. JSON Formatter & Validator

task ที่พบบ่อยที่สุดของ JSON: วาง API response แบบ minified หรือ raw แล้วต้องการอ่านมัน

JSON Formatter ของเราทำได้สามอย่าง:

Pretty-print: รับ {"name":"Alice","age":30,"scores":[98,87,91]} แล้วจัดรูปแบบเป็น:

{
  "name": "Alice",
  "age": 30,
  "scores": [98, 87, 91]
}

Validate: ตรวจจับ syntax errors พร้อมระบุบรรทัดและตำแหน่งที่แน่นอนทันที ข้อผิดพลาดที่พบบ่อยที่ตรวจจับได้:

• Trailing commas (ใช้ได้ใน JS objects แต่ไม่ถูกต้องใน JSON)
• Single quotes แทน double quotes
• Keys ที่ไม่มีเครื่องหมายคำพูดครอบ
• ขาด commas ระหว่าง fields
• วงเล็บไม่ตรงกัน

Minify: บีบอัด JSON ที่จัดรูปแบบแล้วกลับเป็นบรรทัดเดียวสำหรับ API requests หรือการจัดเก็บ

---

2. JSON to TypeScript: สร้าง Interfaces อัตโนมัติ

การเขียน TypeScript interfaces ด้วยมือจาก API response ขนาดใหญ่เป็นเรื่องน่าเบื่อและเกิดข้อผิดพลาดได้ง่าย JSON to TypeScript converter ของเราสร้างมันให้อัตโนมัติ

Input:

{
  "user": {
    "id": 1,
    "name": "Alice",
    "email": "alice@example.com",
    "roles": ["admin", "editor"],
    "metadata": {
      "createdAt": "2024-01-15T10:00:00Z",
      "active": true
    }
  }
}

Output:

interface Metadata {
  createdAt: string;
  active: boolean;
}

interface User {
  id: number;
  name: string;
  email: string;
  roles: string[];
  metadata: Metadata;
}

interface Root {
  user: User;
}

Converter รองรับ nested objects, arrays, optional fields (กรณีที่บาง keys หายไปใน input), และ union types วาง API response จริงแล้วได้ TypeScript ที่พร้อมใช้งานใน production ภายในไม่กี่วินาที

---

3. JSON to Zod Schema: Validation ณ Runtime

TypeScript interfaces ทำงานเฉพาะตอน compile-time เท่านั้น สำหรับ runtime validation — ตรวจสอบ API responses, form data, หรือ config files ณ runtime — คุณต้องการ Zod JSON to Zod converter ของเราสร้าง Zod schema ครบสมบูรณ์จาก JSON ใดๆ

จาก input เดิมข้างต้น:

import { z } from "zod";

const MetadataSchema = z.object({
  createdAt: z.string().datetime(),
  active: z.boolean(),
});

const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
  roles: z.array(z.string()),
  metadata: MetadataSchema,
});

const RootSchema = z.object({
  user: UserSchema,
});

สังเกต การอนุมานประเภทอัจฉริยะ — createdAt ถูกรู้จักเป็น ISO datetime string, email ถูกตรวจจับเป็น email address ไม่ใช่แค่ z.string() — แต่เป็น format ที่ผ่านการตรวจสอบแล้ว

---

4. JSON Schema Validator: ตรวจสอบข้อมูลกับ Schema

หากคุณมี JSON Schema (Draft 4, 6, 7, หรือ 2019-09) และต้องการตรวจสอบข้อมูลกับมัน JSON Schema Validator ของเราจะรัน validation ในเบราว์เซอร์โดยใช้ library ajv

Use cases:

• ตรวจสอบ API request/response payloads ระหว่างการพัฒนา
• ทดสอบว่าข้อมูลที่สร้างขึ้นตรงกับ schema ของคุณ
• Debug schema validation errors ก่อน deploy
• ตรวจสอบว่า configuration files เป็นไปตาม spec

Validator แสดง error paths อย่างละเอียด — ไม่ใช่แค่ "validation failed" แต่ระบุชัดเจนว่า field ไหนล้มเหลวและเพราะอะไร:

/user/email: must match format "email"
/user/age: must be >= 0
/user/roles/2: must be string

---

5. JSON Diff Viewer: ดูว่ามีอะไรเปลี่ยนแปลงบ้าง

เมื่อ debug การเปลี่ยนแปลงของ API หรือเปรียบเทียบ data snapshots สองตัว JSON Diff Viewer ของเราแสดงให้เห็นชัดเจนว่ามีอะไรถูกเพิ่ม ลบ หรือแก้ไข

Left (before):            Right (after):
{                         {
  "status": "active",       "status": "inactive",   ← changed
  "count": 42,              "count": 42,
  "tags": ["a", "b"],       "tags": ["a", "b", "c"] ← added "c"
  "deprecated": true        
}                         }                         ← removed "deprecated"

Diff แสดงในรูปแบบ tree view พร้อม color coding:

• 🟢 เขียว: เพิ่มมา
• 🔴 แดง: ถูกลบ
• 🟡 เหลือง: ถูกแก้ไข
• ⬜ เทา: ไม่มีการเปลี่ยนแปลง

Use cases ที่พบบ่อย:

• เปรียบเทียบ API responses สองตัวก่อนและหลังการเปลี่ยนแปลงโค้ด
• ตรวจสอบว่ามีอะไรเปลี่ยนแปลงใน configuration file ขนาดใหญ่
• Debug ว่าทำไม cached response ถึงแตกต่างจากข้อมูลล่าสุด
• ตรวจสอบว่า data migration ให้ผลลัพธ์ตามที่คาดไว้

---

6. JSONPath Finder: คลิกเพื่อรับ Path

JSONPath คือภาษา query สำหรับ JSON — เทียบเท่ากับ XPath สำหรับ XML เมื่อคุณต้องการ JSONPath ไปยัง nested value ที่ต้องการ JSON Path Finder ของเราให้คุณคลิกที่ค่าใดก็ได้ใน tree แล้วแสดง path ทันที

{
  "store": {
    "books": [
      { "title": "Clean Code", "price": 29.99 },
      { "title": "The Pragmatic Programmer", "price": 39.99 }
    ]
  }
}

คลิกที่ 29.99 → Path: $.store.books[0].price คลิกที่ "The Pragmatic Programmer" → Path: $.store.books[1].title

Paths แสดงทั้งในรูปแบบ dot notation ($.store.books[0].price) และ bracket notation ($['store']['books'][0]['price']) ทำให้ใช้งานได้ง่ายใน JavaScript, Python, หรือ JSONPath library ใดๆ

---

7. JSON to CSV / CSV to JSON: แปลงระหว่างรูปแบบ

APIs ส่งข้อมูลเป็น JSON; spreadsheets ต้องการ CSV CSV ↔ JSON Converter ของเรารองรับทั้งสองทิศทาง

JSON array → CSV:

[
  { "name": "Alice", "age": 30, "city": "NYC" },
  { "name": "Bob", "age": 25, "city": "LA" }
]

กลายเป็น:

name,age,city
Alice,30,NYC
Bob,25,LA

CSV → JSON: ทิศทางตรงข้าม — รับ CSV ที่มี headers แล้วสร้าง array of objects รองรับ quoted fields, commas ภายใน values, และ line endings หลายรูปแบบ

สำหรับการจัดการ CSV data ที่ทรงพลังกว่า ใช้เครื่องมือ SQL on CSV ของเราเพื่อรัน SELECT queries โดยตรงบนไฟล์ CSV ที่อัปโหลด — กรองข้อมูล เรียงลำดับ และ join โดยไม่ต้องเขียน Python แม้แต่บรรทัดเดียว

---

8. JSON to SQL: สร้าง INSERT Statements

เมื่อต้องการนำข้อมูล JSON ใส่ฐานข้อมูล JSON to SQL Converter ของเราสร้าง INSERT statements สำหรับ SQL dialect ใดๆ

Input:

[
  { "id": 1, "name": "Alice", "email": "alice@example.com" },
  { "id": 2, "name": "Bob", "email": "bob@example.com" }
]

Output (PostgreSQL):

INSERT INTO users (id, name, email) VALUES
(1, 'Alice', 'alice@example.com'),
(2, 'Bob', 'bob@example.com');

รองรับ MySQL, PostgreSQL, SQLite, และ SQL Server dialects — จัดการ quoting styles, NULL values, และการแสดงค่า boolean ได้อย่างถูกต้องสำหรับแต่ละ dialect

---

9. JSON Table Viewer: มุมมอง Spreadsheet สำหรับ JSON Arrays

บางครั้งคุณไม่จำเป็นต้องเขียน query — แค่ต้องการดู JSON array ในรูปแบบตาราง JSON Table Viewer ของเราแสดง JSON array ของ objects ใดๆ เป็นตารางที่เรียงลำดับและค้นหาได้

คลิก header ของ column เพื่อเรียงลำดับ พิมพ์ในช่องค้นหาเพื่อกรองแถว รองรับ arrays ทุกขนาด จัดการ nested objects โดยการ flatten และไฮไลต์คำที่ค้นหา

---

Quick Reference

Task	Tool
จัดรูปแบบ/ตรวจสอบ JSON	JSON Formatter
สร้าง TypeScript interfaces	JSON to TypeScript
สร้าง Zod validation schema	JSON to Zod
ตรวจสอบกับ JSON Schema	JSON Schema Validator
เปรียบเทียบ JSON objects สองตัว	JSON Diff Viewer
ค้นหา JSONPath ของค่า	JSON Path Finder
แปลง JSON ↔ CSV	CSV ↔ JSON Converter
สร้าง SQL INSERT statements	JSON to SQL
ดู JSON ในรูปแบบตาราง	JSON Table Viewer

สิ่งที่เชื่อมโยงทุกอย่างเข้าด้วยกัน: เครื่องมือทั้งหมดเหล่านี้ทำงานในเบราว์เซอร์ของคุณทั้งหมด JSON payloads ขนาดใหญ่จะไม่ออกจากเครื่องของคุณ ทำให้ปลอดภัยสำหรับการใช้กับข้อมูล production, API keys ที่ฝังอยู่ใน responses, และ payload ที่มีความอ่อนไหวที่คุณไม่ต้องการให้ประมวลผลโดย server ของบุคคลที่สาม