JSON เป็น HTML

คำแนะนำที่เกี่ยวข้อง

เกี่ยวกับ JSON เป็น HTML และตาราง HTML

กรณีการใช้งาน

• การพัฒนา Frontend: เรนเดอร์ข้อมูล JSON จาก API เป็นตาราง HTML อย่างรวดเร็วเพื่อฝังในแดชบอร์ดผู้ดูแลระบบหรือหน้าเอกสาร
• โปรเจกต์ Tailwind / Bootstrap: วางชื่อคลาส Tailwind หรือ Bootstrap ลงในช่องคลาสตารางโดยตรงเพื่อผสานรวมกับระบบสไตล์ที่มีอยู่อย่างราบรื่น
• หน้าเว็บแบบตอบสนอง: การห่อเลื่อนแนวนอนเริ่มต้นป้องกันไม่ให้ตารางบนมือถือทำลายเลย์เอาต์หน้า
• การแสดงผลการแสดงข้อมูล: วางตารางที่มีสไตล์ลงในบล็อก เอกสาร Confluence Notion หรือแพลตฟอร์มใดๆ ที่รองรับการฝัง HTML
• การสร้างรายงาน: แปลงข้อมูล JSON ที่ส่งออกจากแบ็กเอนด์เป็นรายงานอีเมล HTML อย่างรวดเร็วสำหรับผู้มีส่วนได้ส่วนเสียทางธุรกิจ
• การสร้างต้นแบบ Frontend: ดูตัวอย่างสไตล์ตารางด้วยข้อมูลจริงในช่วงการออกแบบเพื่อจัดตำแหน่งกับผลิตภัณฑ์และการออกแบบก่อนส่งมอบ
• ระบบ CMS: สร้างสนิปเป็ตตาราง HTML แบบคงที่สำหรับ WordPress Drupal และแพลตฟอร์ม CMS อื่นๆ หลีกเลี่ยงความซับซ้อนของเอ็นจิ้นเทมเพลต
• การทดสอบและการดีบัก: วางผลลัพธ์ JSON.stringify จากคอนโซลเบราว์เซอร์เพื่อดูตัวอย่างโครงสร้างสองมิติของข้อมูลซ้อนที่ซับซ้อนอย่างรวดเร็ว
• เทมเพลตอีเมล: ฝัง HTML ตารางเข้ากับอีเมล HTML (ทดสอบความเข้ากันได้กับ Outlook)
• การเขียนเอกสาร API: ฝังตาราง HTML ใน Markdown Swagger Redoc แทนตัวอย่าง JSON เริ่มต้น
• สถานการณ์การสอน: แปลงการบ้าน JSON ซ้อนในหลักสูตรโครงสร้างข้อมูลเป็นตารางเพื่อแสดงการให้คะแนนเป็นชุด
• รายงานการทำความสะอาดข้อมูล: ใช้โหมดแผ่เพื่อแปลง JSON ซ้อนจากการส่งออกฐานข้อมูลเป็นตารางเพื่อการเปรียบเทียบฟิลด์ที่ง่าย

วิธีการใช้งาน

1. วางอาร์เรย์ JSON (แนะนำ) หรืออ็อบเจ็กต์เดี่ยวลงในตัวแก้ไขด้านซ้าย หรือคลิก "Sample" เพื่อโหลดตัวอย่างผลิตภัณฑ์ 3 รายการ หรือคลิก "Upload" เพื่อโหลดไฟล์ .json / .txt
2. เลือกโหมดการจัดการซ้อนบนแถบเครื่องมือ (แนะนำ: "แผ่") อ็อบเจ็กต์ซ้อนจะขยายเป็นคีย์คั่นด้วยจุดเช่น `user.name` โดยอัตโนมัติ
3. คลิกปุ่ม "Convert" (หรือเพียงกด Enter) เพื่อทริกเกอร์การแปลง อินพุตได้รับการป้องกันด้วย debounce 500ms
4. สลับไปที่แท็บ Code ด้านขวาเพื่อดูโค้ดตาราง HTML ที่เน้นไวยากรณ์ หรือแท็บ Preview เพื่อดูการเรนเดอร์ iframe แบบเรียลไทม์
5. เปิดตัวเลือกสไตล์บนแถบเครื่องมือ (ลายม้าลาย / ขอบ / โฮเวอร์ / กะทัดรัด / ตอบสนอง) ป้อนคลาสตารางกำหนดเอง ตั้งค่าตัวยึด null — ตัวอย่างสดจะอัปเดตทันที
6. เมื่อพอใจแล้ว คลิก "Copy" เพื่อคัดลอกโค้ด HTML หรือ "Download" เพื่อบันทึกเป็น table.html คลิก Reset หากคุณต้องการเริ่มใหม่

คุณสมบัติ

• แผ่อ็อบเจ็กต์ซ้อนอัตโนมัติ: ขยาย `{user:{name,age}}` แบบเรียกซ้ำเป็นคีย์แบบจุด `user.name`, `user.age` (ตัวคั่นกำหนดค่าได้) ไม่ต้องเขียนสคริปต์ด้วยตัวเอง
• สามโหมดการจัดการซ้อน: แผ่ (แนะนำ ขยายอัตโนมัติถึง 6 ระดับ) / คีย์ระดับบนสุด (อ็อบเจ็กต์ซ้อนเป็นคอลัมน์เดียว) / สตริง (อ็อบเจ็กต์ซ้อนเป็นสตริง JSON)
• ฮุกคลาส CSS กำหนดเอง: ฉีดสตริงคลาสใดก็ได้เข้า `<table>` และ `<div>` ห่อนอกที่เลือกได้ ผสานรวมกับ Tailwind / Bootstrap / Bulma ได้อย่างราบรื่น
• การเลื่อนแนวนอนแบบตอบสนอง: ห่อนอกด้วย `overflow-x:auto` เป็นค่าเริ่มต้น แถบเลื่อนแนวนอนปรากฏอัตโนมัติบนหน้าจอแคบ
• 6 สวิตช์สไตล์ภาพ: ลายม้าลาย ขอบ เน้นแถวเมื่อวางเมาส์ โหมดกะทัดรัด คอลัมน์ดัชนีแรก (#) คำอธิบายตาราง — ใช้ทันทีจากช่องทำเครื่องหมายในแถบเครื่องมือ
• แท็บคู่ดูตัวอย่าง Code + iframe: แท็บ Code แสดงซอร์ส HTML ที่เน้นไวยากรณ์ แท็บ Preview เรนเดอร์ตารางจริงใน iframe แซนด์บ็อกซ์แบบเรียลไทม์
• การเน้นตามชนิด: null แสดงเป็นสีเทาเอียง (ปรับแต่งข้อความตัวยึดได้) บูลีนเป็นสีเขียว/แดง ตัวเลขเป็นสีน้ำเงิน อ็อบเจ็กต์ซ้อนดู JSON เต็มเมื่อวางเมาส์
• การป้องกันขีดจำกัดแถว: ค่าเริ่มต้น 1000 แถว (1-10000 ปรับได้) ตัดอัตโนมัติพร้อมการแจ้งเตือน "ถูกตัด" เพื่อป้องกันเบราว์เซอร์ช้า
• คำติชมสถิติการสร้าง: แผงด้านขวาแสดง "สร้าง X แถว × Y คอลัมน์" + ป้ายการตัดแบบเรียลไทม์
• คัดลอก / ดาวน์โหลดด้วยคลิกเดียว: ในโหมด Code คัดลอกซอร์ส HTML ไปยังคลิปบอร์ด หรือดาวน์โหลดเป็นไฟล์ table.html
• ข้อมูลตัวอย่าง + อัปโหลดไฟล์: 3 ตัวอย่างผลิตภัณฑ์ในตัว (Laptop / Mouse / Desk Chair) โหลดด้วยคลิกเดียว รองรับการลากวางหรือคลิกเพื่ออัปโหลดไฟล์ .json / .txt
• รีเซ็ตด้วยคลิกเดียว: ปุ่มรีเซ็ตบนแถบเครื่องมือคืนการตั้งค่าทั้ง 14 รายการเป็นค่าเริ่มต้นทันที
• ประวัติในเครื่อง: อิง localStorage จัดเก็บ 200 อินพุตล่าสุดถาวร กู้คืนได้หลังรีเฟรชหรือปิดแท็บโดยไม่ตั้งใจ
• ประมวลผลในเบราว์เซอร์ท้องถิ่นทั้งหมด: การแยกวิเคราะห์ JSON การสร้าง HTML การคัดลอกและดาวน์โหลดทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ ไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ

ตัวอย่างโค้ด

// 1) เรียก GitHub API เพื่อดึงรายชื่อผู้ใช้
async function fetchUsers() {
  const res = await fetch('https://api.github.com/users?per_page=10');
  return await res.json();
}

// 2) ฟังก์ชันการแผ่ซ้อน (เทียบเท่ากับตรรกะการแผ่ของเครื่องมือ)
function flattenObject(obj, prefix = '', sep = '.', result = {}) {
  for (const [k, v] of Object.entries(obj || {})) {
    const key = prefix ? `${prefix}${sep}${k}` : k;
    if (v && typeof v === 'object' && !Array.isArray(v)) {
      flattenObject(v, key, sep, result);
    } else {
      result[key] = v;
    }
  }
  return result;
}

// 3) แปลงข้อมูลที่แผ่แล้วเป็นตาราง HTML ฉีดคลาส Tailwind
function generateHtmlTable(rows) {
  const flat = rows.map(r => flattenObject(r));
  const cols = [...new Set(flat.flatMap(r => Object.keys(r)))];
  const thead = cols.map(c => `<th class="px-4 py-2 text-left">${c}</th>`).join('');
  const tbody = flat.map(r =>
    `<tr class="border-b hover:bg-gray-50">${cols.map(c => `<td class="px-4 py-2">${r[c] ?? 'N/A'}</td>`).join('')}</tr>`
  ).join('');
  return `<table class="min-w-full text-sm">
  <thead class="bg-gray-100"><tr>${thead}</tr></thead>
  <tbody>${tbody}</tbody>
</table>`;
}

// 4) ฉีดลงในหน้า
const users = await fetchUsers();
const html = generateHtmlTable(users);
document.getElementById('table-container').innerHTML = html;
console.log('สร้าง ' + users.length + ' แถว ' + (Object.keys(flattenObject(users[0])).length) + ' คอลัมน์');

from flask import Flask, jsonify, render_template_string
import json

app = Flask(__name__)

TEMPLATE = """
<!doctype html><html><body>
<div class="overflow-x-auto">{{ table_html | safe }}</div>
</body></html>
"""

def flatten(obj, prefix='', sep='.', result=None):
    """แผ่อ็อบเจ็กต์ซ้อนแบบเรียกซ้ำ"""
    if result is None:
        result = {}
    for k, v in (obj or {}).items():
        key = f"{prefix}{sep}{k}" if prefix else k
        if isinstance(v, dict):
            flatten(v, key, sep, result)
        else:
            result[key] = v
    return result

def json_to_html_table(data, table_class='min-w-full border-collapse',
                        max_rows=1000, responsive=True):
    if isinstance(data, dict):
        data = [data]
    if not data:
        return "<p>ไม่มีข้อมูล</p>"

    # การตัดแถว
    truncated = False
    if len(data) > max_rows:
        data = data[:max_rows]
        truncated = True

    # แผ่แต่ละแถว
    flat_rows = [flatten(row) for row in data]

    # รวบรวมชื่อคอลัมน์ทั้งหมด (ใช้ set เพื่อขจัดข้อมูลซ้ำ รักษาลำดับการแทรก)
    columns = []
    for row in flat_rows:
        for k in row.keys():
            if k not in columns:
                columns.append(k)

    # สร้าง thead
    thead = "".join(f'<th class="px-4 py-2 text-left bg-gray-100">{c}</th>' for c in columns)

    # สร้างแถวตาราง
    rows = []
    for i, row in enumerate(flat_rows):
        bg = "bg-gray-50" if i % 2 == 1 else ""
        tds = "".join(
            f'<td class="px-4 py-2 {bg}">{("N/A" if row.get(c) is None else row.get(c, ""))}</td>'
            for c in columns
        )
        rows.append(f'<tr class="hover:bg-blue-50">{tds}</tr>')

    html = f'<table class="{table_class}"><thead><tr>{thead}</tr></thead><tbody>{"".join(rows)}</tbody></table>'
    if responsive:
        html = f'<div class="overflow-x-auto">{html}</div>'

    if truncated:
        html = f'<p class="text-amber-600 text-sm">ข้อมูลถูกตัดให้เหลือ {max_rows} แถวแรก</p>{html}'

    return html


@app.route('/api/users')
def users():
    data = json.load(open('users.json'))
    return jsonify(data)

@app.route('/users.html')
def users_html():
    import requests
    data = requests.get('http://localhost:5000/api/users').json()
    return render_template_string(TEMPLATE, table_html=json_to_html_table(data))


if __name__ == '__main__':
    app.run(debug=True)

# 1) ใช้ jq เพื่อรวบรวมและแผ่ล็อกที่ซ้อนเป็นคีย์แบบจุด
cat app.log | jq -s '
  group_by(.response.status_code) |
  map({
    status: .[0].response.status_code,
    count: length,
    "first_request.method": .[0].request.method,
    "last_request.url": .[-1].request.url,
    "first_seen": min_by(.timestamp).timestamp,
    "last_seen": max_by(.timestamp).timestamp
  })
' > stats.json

# 2) วาง stats.json ลงในเครื่องมือนี้
#    เลือกโหมด "แผ่ (แนะนำ)" บนแถบเครื่องมือ
#    ทำเครื่องหมาย "ลายม้าลาย + การห่อแบบตอบสนอง + ขอบ"
#    ในช่องชื่อคลาสตารางป้อน: min-w-full text-sm border-collapse
#    ตั้งตัวยึด null: - (ฟิลด์ที่หายไปแสดงเป็น -)
#    ตั้งคำอธิบาย: สถิติล็อกข้อผิดพลาดการผลิต 2026-07
#    คลิก Convert แล้วดาวน์โหลด table.html

# 3) อัปโหลดไปยังไซต์คงที่ S3 / OSS
aws s3 cp table.html s3://my-bucket/reports/2026-07.html --acl public-read

# หรือฝังในเอกสาร Confluence / Notion / VuePress
sed -i '' 's/min-w-full/min-w-full shadow-md/g' table.html

# หรือส่งเป็นอีเมล HTML
mutt -e "set content_type=text/html" -s "ล็อกข้อผิดพลาด 2026-07" your@email.com < table.html

คำถามที่พบบ่อย

การแก้ไขปัญหา

อภิธานศัพท์

ตาราง HTML (HTML Table)

องค์ประกอบการแสดงข้อมูลที่มีโครงสร้างมาตรฐาน W3C ประกอบด้วยแท็กเชิงความหมาย table / thead / tbody / tr / th / td / caption โค้ดที่สร้างโดยเครื่องมือนี้ปฏิบัติตามโครงสร้างนี้อย่างเคร่งครัด

อาร์เรย์ JSON

คอลเลกชันของอ็อบเจ็กต์ที่อยู่ในวงเล็บเหลี่ยม [...] เครื่องมือใช้อ็อบเจ็กต์แต่ละตัวในอาร์เรย์เป็นแถวของตาราง; อาร์เรย์ว่างจะไม่สร้างตาราง (แสดงการแจ้งเตือน)

อ็อบเจ็กต์ JSON

คอลเลกชันของคู่คีย์-ค่าที่อยู่ในวงเล็บปีกกา {} เครื่องมือใช้คีย์แต่ละตัวของอ็อบเจ็กต์เป็นส่วนหัวของตาราง และค่าเป็นเซลล์; อ็อบเจ็กต์เดี่ยวจะถูกห่อเป็นตารางแถวเดียวโดยอัตโนมัติ

การแผ่ (Flatten)

การขยายอ็อบเจ็กต์ซ้อนแบบเรียกซ้ำเป็นคีย์แบนคั่นด้วยจุด เช่น {user:{name:'A'}} → 'user.name' เครื่องมือรองรับการแผ่อัตโนมัติ 6 ระดับพร้อมตัวคั่นที่กำหนดค่าได้

thead / tbody

สองส่วนเชิงความหมายของตาราง HTML: thead ห่อแถวส่วนหัว (th), tbody ห่อแถวข้อมูล (td) โค้ดที่สร้างโดยเครื่องมือแบ่งแยกสองส่วนนี้อย่างเคร่งครัด

Caption

แท็กชื่อตาราง ตั้งอยู่ในแถวแรกภายในตาราง เครื่องมือรองรับข้อความ caption กำหนดเอง เมื่อเปิดใช้งาน ชื่อที่ระบุจะแสดงเหนือตาราง มีประโยชน์ต่อ SEO และการเข้าถึง

ลายม้าลาย (Zebra Striping)

รูปแบบภาพที่แถวคี่และแถวคู่สลับกันใช้สีพื้นหลังที่ต่างกัน มักใช้คู่ #fff / #f9fafb เครื่องมือเปิดใช้งานผ่านช่องทำเครื่องหมาย "ลายม้าลาย" ช่วยเพิ่มความสามารถในการอ่านของตารางยาวได้อย่างมาก

สไตล์อินไลน์ (Inline Style)

การเขียน CSS โดยตรงผ่านแอตทริบิวต์ style ของแท็ก HTML แทนที่จะอ้างอิงสไตล์ชีตภายนอก เครื่องมือส่งออกสไตล์ทั้งหมดเป็นสไตล์อินไลน์ตามค่าเริ่มต้น ดังนั้นโค้ดสามารถใช้ได้ทันทีโดยไม่ต้องมีไฟล์ CSS เพิ่มเติม

ฮุกคลาส CSS

ความสามารถที่แตกต่างของเครื่องมือ: การฉีดสตริงคลาสใดก็ได้ (เช่น คลาส Tailwind) ในแท็ก `<table>` ผสานรวมกับเฟรมเวิร์ก CSS ที่มีอยู่อย่างราบรื่น นี่เป็นการอัปเกรดที่สำคัญเหนือคู่แข่ง

iframe sandbox

โหมดแซนด์บ็อกซ์ที่ปลอดภัยของแท็ก HTML iframe ซึ่งสามารถจำกัดการทำงานของสคริปต์และการส่งแบบฟอร์ม เครื่องมือใช้ iframe ที่มี sandbox="allow-same-origin" เพื่อดูตัวอย่าง HTML ที่สร้าง ป้องกันการทำงานของสคริปต์โดยไม่ตั้งใจ

การเน้นตามชนิด

ความสามารถที่แตกต่างของเครื่องมือ: การใช้สีที่ต่างกันตามชนิด JS ของค่าเซลล์ (null / boolean / number / object / string) ทำให้การดีบักข้อมูล API เป็นเรื่องง่ายขึ้น

ประวัติ localStorage

ที่เก็บคีย์-ค่าในเครื่องที่เบราว์เซอร์จัดให้ (ความจุ ~5-10MB) เครื่องมือใช้ localStorage เพื่อจัดเก็บ 200 อินพุตล่าสุดอย่างถาวร ซึ่งสามารถกู้คืนได้อย่างรวดเร็วหลังจากรีเฟรชหรือปิดแท็บโดยไม่ตั้งใจ

การห่อแบบตอบสนอง (Responsive Wrapper)

การห่อตารางใน `<div style="overflow-x:auto;max-width:100%;">` ภายนอก เพื่อให้ตารางได้รับแถบเลื่อนแนวนอนโดยอัตโนมัติบนหน้าจอแคบ เปิดใช้งานตามค่าเริ่มต้น สามารถปิดได้บนแถบเครื่องมือ

Debounce

เทคนิคการเพิ่มประสิทธิภาพ frontend: การรวม callback เหตุการณ์ความถี่สูง (เช่น input) เป็นการทำงานครั้งเดียวหลังจากทริกเกอร์ครั้งสุดท้าย เครื่องมือตั้งค่า debounce 500ms เพื่อหลีกเลี่ยงความล่าช้าจากการแยกวิเคราะห์ไฟล์ขนาดใหญ่

W3C HTML5

ข้อกำหนดมาตรฐาน HTML ที่สร้างโดย World Wide Web Consortium (W3C) โค้ดที่สร้างโดยเครื่องมือเป็นไปตามข้อกำหนด HTML5 และเรนเดอร์อย่างถูกต้องในเบราว์เซอร์สมัยใหม่ทั้งหมด

เปรียบเทียบสามโหมดการจัดการซ้อน

แถบเครื่องมือมีสามโหมดสำหรับสถานการณ์ซ้อนที่แตกต่างกัน เลือกตามความซับซ้อนของโครงสร้าง JSON:

ตารางสรุปตัวเลือกการตั้งค่า 14 รายการของแถบเครื่องมือ

ตัวเลือกการตั้งค่าทั้ง 14 รายการในแถบเครื่องมือและความแตกต่างทางสายตา เพื่อการเลือกชุดค่าผสมอย่างรวดเร็ว:

ตารางสรุปกฎการเน้นเซลล์ตามชนิด

เครื่องมือจะใช้สีที่ต่างกันโดยอัตโนมัติตามชนิด JavaScript ของค่า JSON เพื่อการจดจำประเภทข้อมูลอย่างรวดเร็ว:

Privacy & Security

เครื่องมือ JSON เป็น HTML นี้เรียกใช้การแยกวิเคราะห์ JSON การแผ่ซ้อน การสร้าง HTML การคัดลอก และการดาวน์โหลดทั้งหมดในเบราว์เซอร์ของคุณผ่าน JavaScript ข้อมูล JSON ที่ป้อนและโค้ด HTML ที่สร้างจะไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์ใดๆ ไม่ถูกบันทึก แคช หรือจัดเก็บในคลาวด์ คุณสามารถใช้เครื่องมือนี้กับการตอบสนอง API ที่ละเอียดอ่อนที่ยังไม่เปิดตัวและฟิลด์ทางธุรกิจภายในได้อย่างปลอดภัย — การปิดหน้าจะล้างข้อมูลทั้งหมด

Authoritative References

• MDNMDN — องค์ประกอบ HTML <table>
• MDNMDN — พื้นฐานตาราง HTML
• W3Cข้อกำหนด W3C HTML5 — องค์ประกอบ table
• MDNMDN — แอตทริบิวต์ iframe sandbox
• MDNMDN — JSON.parse / JSON.stringify
• TailwindTailwind CSS — สไตล์ตาราง
• BootstrapBootstrap — ตาราง