🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

[Python] แนะนำโมดูล json! มาทำความเข้าใจรูปแบบข้อมูลที่จำเป็นสำหรับการสร้างเว็บกันเถอะ

หากต้องการเรียกใช้ Python ผ่าน Command Prompt หรือ PowerShell บนคอมพิวเตอร์ของคุณ คุณจำเป็นต้องดาวน์โหลดและติดตั้ง Python ก่อน
หากคุณยังไม่ได้ติดตั้ง กรุณาดูบทความ การติดตั้ง Python และการตั้งค่าสภาพแวดล้อมการพัฒนา เพื่อทำการติดตั้ง Python

สวัสดีครับ! ผมจะมาแชร์ความรู้ที่ได้เรียนรู้จากประสบการณ์การสร้างเว็บไซต์ด้วยตัวเองกับ AI ทั้งๆ ที่เมื่อไม่กี่เดือนก่อนยังไม่รู้จักการเขียนโปรแกรมเลยแม้แต่น้อย

เมื่อได้ยินคำว่า "JSON" (เจสัน) ทุกคนนึกถึงอะไรกันบ้างครับ? อาจจะรู้สึกว่า "ดูเหมือนจะยากนะ..." หรือ "เป็นสิ่งที่ผู้เชี่ยวชาญด้านเว็บใช้กันใช่ไหม?" ตอนแรกผมก็คิดแบบนั้นเหมือนกันครับ แต่ในการสร้างเว็บไซต์ โดยเฉพาะการสร้าง "เว็บไซต์แบบไดนามิก" ในปัจจุบัน JSON เป็นสิ่งที่หลีกเลี่ยงไม่ได้ และเมื่อได้ทำความรู้จักกันแล้ว มันจะกลายเป็นคู่หูที่พึ่งพาได้มากที่สุดเลยล่ะครับ

ในบทความนี้ ผมจะอธิบายวิธีการจัดการข้อมูล JSON ได้อย่างอิสระโดยใช้โมดูล json ของ Python พร้อมทั้งบอกเล่าถึงจุดที่ผมเคยติดปัญหาด้วยภาษาที่เข้าใจง่ายที่สุดในโลก เป้าหมายคือเมื่อทุกคนอ่านบทความนี้จบ จะสามารถลงมือทำและรู้สึกได้ว่า "อ๋อ! JSON ใช้งานแบบนี้นี่เอง!" ผมได้เตรียมโค้ดที่ "ใช้งานได้จริง" และสามารถคัดลอกไปใช้ได้เลยไว้มากมาย มาสัมผัสประสบการณ์ "มันทำงานได้!" ไปด้วยกันเถอะครับ


JSON คืออะไร? แล้วทำไมถึงจำเป็นสำหรับการสร้างเว็บ?

เรามาวางนิยามที่ยากๆ ไว้ก่อนนะครับ พูดง่ายๆ ก็คือ JSON เป็น "ภาษากลางสำหรับการแลกเปลี่ยนข้อมูลระหว่างโปรแกรมต่างๆ" ครับ

ตัวอย่างเช่น สมมติว่าน้อง Python ที่ทำงานอยู่เบื้องหลัง (เซิร์ฟเวอร์) ของเว็บไซต์คุณ มีข้อมูลโปรไฟล์ของผู้ใช้ (ชื่อ, อายุ, งานอดิเรก ฯลฯ) อยู่ และคุณต้องการส่งข้อมูลนั้นไปให้น้อง JavaScript ที่ทำงานอยู่เบื้องหน้า (เบราว์เซอร์) เพื่อแสดงผลเป็นการ์ดโปรไฟล์สวยๆ

  1. น้อง Python จะแปลข้อมูลที่มีอยู่เป็น "JSON" ซึ่งเป็นภาษาสากลแล้วส่งไป
  2. น้อง JavaScript จะรับ JSON นั้นมา แล้วแปลกลับเป็นภาษาที่ตัวเองเข้าใจ
  3. ข้อมูลถูกส่งต่อสำเร็จ และการ์ดโปรไฟล์ก็แสดงขึ้นมา!

ด้วยวิธีนี้ JSON จึงทำหน้าที่เป็น "สะพานเชื่อม" ที่ขาดไม่ได้ในการแลกเปลี่ยนข้อมูลระหว่างฝั่งเซิร์ฟเวอร์และฝั่งฟรอนต์เอนด์ เวลาที่เราดึงข้อมูลพยากรณ์อากาศหรือข่าวจาก Web API (กลไกสำหรับดึงข้อมูลจากบริการภายนอก) ก็ใช้รูปแบบ JSON นี้เกือบ 100% เลยครับ สะดวกใช่ไหมล่ะ!


4 เวทมนตร์พื้นฐานสำหรับจัดการ JSON ใน Python

ใน Python มีโมดูลมาตรฐานชื่อว่า json ที่เตรียมไว้ให้เราใช้จัดการกับ JSON ที่สะดวกสบายนี้อยู่แล้ว ไม่จำเป็นต้อง pip install แค่เขียนว่า import json ก็สามารถใช้งานได้ทันที

โมดูลนี้มีฟังก์ชันมากมาย แต่สำหรับมือใหม่ แค่จำฟังก์ชัน (คาถา) 4 อย่างต่อไปนี้ก็เพียงพอแล้วครับ!

คิดว่า "เอ๊ะ ชื่อคล้ายๆ กันจนสับสนไปหมด!" ใช่ไหมครับ? ไม่เป็นไรครับ ผมก็เคยเป็น (ฮ่าๆ) มีวิธีจำง่ายๆ อยู่ครับ

ให้จำไว้ว่า ตัวที่ลงท้ายด้วย s (dumps, loads) คือตัวที่ใช้กับ String (สตริง) ส่วนตัวที่ไม่มี s จะใช้กับไฟล์โดยตรง แค่นี้ก็ไม่สับสนแล้วใช่ไหมครับ!

1. การแปลงข้อมูล Python เป็นสตริง JSON: json.dumps()

ก่อนอื่น เรามาลองแปลงข้อมูล dictionary (dict) ของ Python ให้เป็นสตริงในรูปแบบ JSON กันก่อน นี่คือพื้นฐานที่สุดเลยครับ


# python-code
import json

# ข้อมูล dictionary ของ Python
user_data = {
    "name": "CopiCode สมชาย",
    "age": 30,
    "is_creator": True,
    "skills": ["HTML", "CSS", "JavaScript", "Python"]
}

# แปลง dictionary ของ Python เป็นสตริงรูปแบบ JSON
json_string = json.dumps(user_data)

print(json_string)
# มาลองตรวจสอบชนิดข้อมูลกันด้วย
print(type(json_string))
        

ผลลัพธ์การทำงาน:


{"name": "CopiCode \u0e2a\u0e21\u0e0a\u0e32\u0e22", "age": 30, "is_creator": true, "skills": ["HTML", "CSS", "JavaScript", "Python"]}
<class 'str'>
    

[จุดที่มักจะติดขัด №1] ภาษาไทยกลายเป็น `\uXXXX`!

ถ้าคุณดูผลลัพธ์ข้างบนแล้วสังเกตเห็นว่า "เอ๊ะ? ทำไมชื่อกลายเป็นสัญลักษณ์แปลกๆ!" แสดงว่าคุณเป็นคนช่างสังเกตมากครับ นี่คืออาการ "ตัวอักษรเพี้ยน" ชนิดหนึ่ง ซึ่งผมก็เคยติดปัญหานี้อยู่นานมากตอนแรก

สาเหตุคือ โดยปกติแล้ว json.dumps() จะทำการ escape (แปลงให้อยู่ในรูปแบบที่ปลอดภัย) ตัวอักษรที่ไม่ใช่ ASCII (พูดง่ายๆ คือตัวอักษรอื่นๆ ที่ไม่ใช่อักขระภาษาอังกฤษและตัวเลข) วิธีแก้คือการเพิ่มคาถา ensure_ascii=False เข้าไปครับ


# python-code
import json

user_data = {
    "name": "CopiCode สมชาย",
    "age": 30,
    "is_creator": True,
    "skills": ["HTML", "CSS", "JavaScript", "Python"]
}

# เพิ่ม ensure_ascii=False เพื่อให้แสดงผลภาษาไทยได้โดยตรง
json_string_jp = json.dumps(user_data, ensure_ascii=False)

print(json_string_jp)
        

ผลลัพธ์การทำงาน:


{"name": "CopiCode สมชาย", "age": 30, "is_creator": true, "skills": ["HTML", "CSS", "JavaScript", "Python"]}
    

เยี่ยมไปเลย! ภาษาไทยแสดงผลอย่างถูกต้องแล้วใช่ไหมครับ ถ้าจะสร้างบริการเว็บสำหรับคนไทย ensure_ascii=False นี่แทบจะเป็นคู่หูที่ขาดไม่ได้เลยครับ


[จุดที่มักจะติดขัด №2] JSON แสดงผลในบรรทัดเดียว อ่านยาก!

อีกหนึ่งปัญหาครับ พอข้อมูลเยอะขึ้น ทุกอย่างจะถูกแสดงผลต่อกันเป็นบรรทัดเดียว ทำให้ทายากมาก ปัญหานี้ก็สามารถแก้ไขได้ด้วยออปชันเช่นกันครับ โดยการระบุ indent (การย่อหน้า) จะช่วยเพิ่มการขึ้นบรรทัดใหม่และการย่อหน้าให้อ่านง่ายขึ้นสำหรับมนุษย์ ตัวเลขคือจำนวนช่องว่าง และส่วนใหญ่มักจะใช้ 4 ครับ


# python-code
import json

user_data = {
    "name": "CopiCode สมชาย",
    "age": 30,
    "is_creator": True,
    "skills": ["HTML", "CSS", "JavaScript", "Python"]
}

# ระบุทั้ง ensure_ascii=False และ indent=4
json_string_pretty = json.dumps(user_data, ensure_ascii=False, indent=4)

print(json_string_pretty)
        

ผลลัพธ์การทำงาน:


{
    "name": "CopiCode สมชาย",
    "age": 30,
    "is_creator": true,
    "skills": [
        "HTML",
        "CSS",
        "JavaScript",
        "Python"
    ]
}
    

เป็นยังไงบ้างครับ? ดูอ่านง่ายขึ้นเยอะเลยใช่ไหมครับ ออปชันสองตัวนี้มักจะถูกใช้คู่กันบ่อยๆ ดังนั้นจำไว้ให้ดีนะครับ ใน เอกสารทางการของ Python ก็มีคำอธิบายเกี่ยวกับออปชันเหล่านี้อย่างละเอียดเช่นกัน


2. การแปลงสตริง JSON กลับเป็นข้อมูล Python: json.loads()

ต่อไปเป็นการทำงานแบบย้อนกลับครับ เราจะมาแปลง "สตริง" ในรูปแบบ JSON ที่ได้รับมาจาก Web API หรือที่อื่นๆ กลับมาเป็นข้อมูล dictionary ที่ Python สามารถจัดการได้กันครับ เราจะใช้ loads ที่มีตัว `s` ครับ


# python-code
import json

# สมมติว่าได้รับสตริงแบบนี้มาจาก Web API
received_json_string = """
{
    "id": "001",
    "productName": "คีย์บอร์ดสุดเจ๋ง",
    "price": 15800,
    "inStock": true
}
"""

# แปลงสตริง JSON เป็น dictionary ของ Python
product_data = json.loads(received_json_string)

print(product_data)
# มาลองตรวจสอบชนิดข้อมูลกันด้วย
print(type(product_data))

# เมื่อกลายเป็น dictionary แล้ว เราสามารถดึงค่าออกมาโดยใช้ key ได้
print(f"ชื่อสินค้า: {product_data['productName']}")
print(f"ราคา: {product_data['price']} เยน")
        

ผลลัพธ์การทำงาน:


{'id': '001', 'productName': 'คีย์บอร์ดสุดเจ๋ง', 'price': 15800, 'inStock': True}
<class 'dict'>
ชื่อสินค้า: คีย์บอร์ดสุดเจ๋ง
ราคา: 15800 เยน
    

JSON ที่เคยเป็นสตริง ได้ถูกแปลงเป็น dictionary (dict) ของ Python อย่างสวยงาม! แค่นี้เราก็สามารถจัดการข้อมูลหรือดึงเฉพาะข้อมูลที่ต้องการออกมาได้อย่างอิสระแล้วครับ


3. การเขียนข้อมูล Python ลงในไฟล์ JSON: json.dump()

ต่อไปเป็นการจัดการไฟล์ครับ เราจะใช้ dump() ที่ไม่มีตัว `s` ซึ่งมักจะใช้เมื่อต้องการบันทึกข้อมูลการตั้งค่าเว็บไซต์หรือผลลัพธ์จากการประมวลผลลงในไฟล์

dump() จะรับอาร์กิวเมนต์ 2 ตัว ตัวแรกคือข้อมูล Python ที่ต้องการเขียน และตัวที่สองคืออ็อบเจกต์ไฟล์ การใช้โครงสร้าง with open(...) เป็นวิธีที่ปลอดภัยและเป็นที่นิยมครับ


# python-code
import json

# ข้อมูลการตั้งค่าที่ต้องการบันทึก
app_settings = {
    "theme": "dark",
    "language": "thai",
    "notifications": {
        "email": True,
        "push": False
    },
    "version": "1.0.2"
}

# 'w' หมายถึงโหมดเขียน (write)
# การระบุ encoding='utf-8' เป็นธรรมเนียมปฏิบัติที่ดีเมื่อมีภาษาไทย
with open('settings.json', 'w', encoding='utf-8') as f:
    # indent และ ensure_ascii ก็สามารถใช้ได้เช่นกัน
    json.dump(app_settings, f, indent=4, ensure_ascii=False)

print("เขียนการตั้งค่าลงในไฟล์ settings.json แล้ว")
        

เมื่อรันโค้ดนี้ จะมีไฟล์ชื่อ settings.json ถูกสร้างขึ้นในไดเรกทอรีเดียวกับสคริปต์ Python ของคุณ เนื้อหาข้างในก็จะเป็นรูปแบบที่อ่านง่ายเหมือนกับตอนที่เราใช้ dumps จัดรูปแบบเลยครับ


4. การอ่านไฟล์ JSON มาเป็นข้อมูล Python: json.load()

สุดท้าย เรามาลองอ่านไฟล์ settings.json ที่สร้างไว้เมื่อสักครู่กันครับ เป็นการจัดการไฟล์จึงต้องใช้ load() ที่ไม่มีตัว `s` ครับ


# python-code
import json
import os # import โมดูล os เพื่อตรวจสอบการมีอยู่ของไฟล์

file_path = 'settings.json'

# ตรวจสอบว่าไฟล์มีอยู่จริงหรือไม่
if os.path.exists(file_path):
    # 'r' หมายถึงโหมดอ่าน (read)
    with open(file_path, 'r', encoding='utf-8') as f:
        # แค่ส่งอ็อบเจกต์ไฟล์เข้าไป
        loaded_settings = json.load(f)

    print("อ่านการตั้งค่าจาก settings.json แล้ว")
    print(loaded_settings)
    
    # ใช้ข้อมูลที่อ่านมาประมวลผล
    print(f"การตั้งค่าธีมปัจจุบัน: {loaded_settings['theme']}")
else:
    print(f"ข้อผิดพลาด: ไม่พบไฟล์ {file_path}")
    print("กรุณารันโค้ดตัวอย่างของ json.dump() ก่อน")
        

ผลลัพธ์การทำงาน:


อ่านการตั้งค่าจาก settings.json แล้ว
{'theme': 'dark', 'language': 'thai', 'notifications': {'email': True, 'push': False}, 'version': '1.0.2'}
การตั้งค่าธีมปัจจุบัน: dark
    

เท่านี้คุณก็เชี่ยวชาญเวทมนตร์พื้นฐานทั้ง 4 อย่างแล้ว! ถ้าจัดการกับสตริง ให้ใช้ dumps/loads ที่มี `s` ถ้าจัดการกับไฟล์ ให้ใช้ dump/load ที่ไม่มี `s` แค่นี้เองครับ!


[โค้ดที่ก๊อปปี้ไปใช้ได้เลย] ลองปฏิบัติจริง! สร้างการ์ดโปรไฟล์แบบไดนามิกจากข้อมูล JSON

มาถึงแล้วครับ! นี่คือส่วนที่สำคัญที่สุดของบทความนี้ เราจะนำความรู้ทั้งหมดที่เรียนมาใช้เพื่อเชื่อมต่อ Python กับ JavaScript และสัมผัสประสบการณ์การสร้างเนื้อหา HTML แบบไดนามิกจากข้อมูล JSON กัน

ในโลกของการพัฒนาเว็บจริงๆ เราจะแยกข้อมูลกับการแสดงผลออกจากกันแบบนี้เลยครับ เมื่อคุณได้ลองทำสิ่งนี้ คุณจะเข้าใจถึงพลังที่แท้จริงของ JSON!

โค้ด HTML ฉบับสมบูรณ์ที่นำไปใช้ได้ทันที

คัดลอกโค้ดทั้งหมดด้านล่าง แล้วสร้างไฟล์ชื่อ profile.html และบันทึก จากนั้นลองเปิดไฟล์นั้นในเว็บเบราว์เซอร์ของคุณดูครับ

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>โปรไฟล์ที่สร้างจากข้อมูล JSON</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #121212;
            color: #e0e0e0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .card {
            background-color: #1e1e1e;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
            padding: 2rem;
            width: 320px;
            border: 1px solid #333;
        }
        .card h1 {
            color: #669df6;
            margin-top: 0;
            border-bottom: 2px solid #669df6;
            padding-bottom: 0.5rem;
        }
        .card p {
            line-height: 1.6;
        }
        .card .label {
            font-weight: bold;
            color: #8ab4f8;
        }
        .skills {
            list-style: none;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        .skills li {
            background-color: #333;
            padding: 0.3rem 0.8rem;
            border-radius: 1rem;
            font-size: 0.9em;
        }
    </style>
</head>
<body>

<!-- การ์ดโปรไฟล์จะถูกแทรกที่นี่ -->
<div id="profile-container"></div>

<!-- 
    [สำคัญมาก!]
    โดยปกติแล้ว ข้อมูล JSON นี้จะถูกส่งมาจากเซิร์ฟเวอร์ที่ทำงานด้วย Python
    ในตัวอย่างนี้ เพื่อจำลองการทำงานดังกล่าว เราจะฝัง
    ข้อมูล JSON ไว้ในแท็ก <script> โดยตรง
-->
<script id="user-json-data" type="application/json">
{
    "name": "บอทผู้ช่วย AI",
    "age": 2,
    "bio": "ผมเป็นผู้ช่วย AI ที่เชี่ยวชาญ Python และ JavaScript ครับ พร้อมสนับสนุนการสร้างเว็บของคุณอย่างเต็มที่!",
    "is_active": true,
    "skills": ["การวิเคราะห์ข้อมูล", "การพัฒนาเว็บ", "การประมวลผลภาษาธรรมชาติ", "การดีบัก"]
}
</script>

<script>
    // โค้ด JavaScript นี้จะทำงานในเบราว์เซอร์
    document.addEventListener('DOMContentLoaded', function() {
        // 1. ดึงสตริง JSON จากแท็ก <script>
        var jsonScriptTag = document.getElementById('user-json-data');
        var jsonString = jsonScriptTag.textContent;

        // 2. แปลงสตริง JSON เป็นอ็อบเจกต์ JavaScript
        var userData = JSON.parse(jsonString);

        // 3. สร้างเนื้อหา HTML โดยใช้ข้อมูลที่ดึงมา
        var container = document.getElementById('profile-container');
        
        // สร้าง HTML สำหรับรายการทักษะ
        var skillsHtml = userData.skills.map(function(skill) {
            return '<li>' + skill + '</li>';
        }).join('');

        // สร้าง HTML ทั้งหมดของการ์ดโปรไฟล์ด้วยการต่อสตริง
        var profileCardHtml = 
            '<div class="card">' +
                '<h1>' + userData.name + '</h1>' +
                '<p><span class="label">อายุ:</span> ' + userData.age + ' ปี</p>' +
                '<p><span class="label">เกี่ยวกับฉัน:</span> ' + userData.bio + '</p>' +
                '<p><span class="label">สถานะ:</span> ' + (userData.is_active ? 'ใช้งาน' : 'ไม่ใช้งาน') + '</p>' +
                '<h2 style="color: #669df6; font-size: 1.2em;">ทักษะ</h2>' +
                '<ul class="skills">' +
                    skillsHtml +
                '</ul>' +
            '</div>';

        // 4. แทรก HTML ที่สร้างขึ้นลงในหน้าเว็บ
        container.innerHTML = profileCardHtml;
    });
</script>

</body>
</html>
        

เมื่อเปิดในเบราว์เซอร์ คุณจะเห็นการ์ดโปรไฟล์ที่ตกแต่งอย่างสวยงามปรากฏขึ้นมา ทั้งๆ ที่ในไฟล์ HTML ไม่ได้เขียนองค์ประกอบของการ์ดไว้โดยตรงเลย!

ในโค้ดนี้ JavaScript ที่อยู่ด้านล่างจะอ่านข้อมูล JSON ที่เขียนไว้ใน <script id="user-json-data"> ฟังก์ชัน JSON.parse() คือ json.loads() เวอร์ชัน JavaScript นั่นเอง จากนั้นมันจะใช้ข้อมูลนั้นมาสร้าง HTML แบบไดนามิก แล้วแทรกลงในตำแหน่งที่มี id="profile-container"

ในการพัฒนาเว็บจริงๆ เซิร์ฟเวอร์ Python จะสร้างส่วนข้อมูล JSON นี้ขึ้นมาแบบไดนามิก แล้วฝังลงในเทมเพลต HTML เพื่อส่งไปยังเบราว์เซอร์ นี่คือกลไกพื้นฐานที่คุณเพิ่งได้สัมผัสด้วยตัวเองในไฟล์เดียว น่าทึ่งใช่ไหมครับ?


สรุป: JSON ไม่ได้น่ากลัว แต่เป็นอาวุธที่ทรงพลังที่สุดของคุณ!

ครั้งนี้ ผมได้อธิบายเกี่ยวกับการจัดการข้อมูลโดยใช้โมดูล json ของ Python และความสำคัญของมันในการสร้างเว็บ โดยผสมผสานกับประสบการณ์ส่วนตัวของผม

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

ลองแก้ไขโค้ดในบทความนี้และทดลองดูว่า "ถ้าเปลี่ยนแบบนี้จะเป็นอย่างไร?" การลองผิดลองถูกนี่แหละคือเครื่องปรุงรสที่ดีที่สุดที่จะทำให้คุณเติบโตในฐานะนักพัฒนา!


ไปยังขั้นตอนต่อไป

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

ประมวลผลอาร์กิวเมนต์ของบรรทัดคำสั่งด้วยโมดูล sys