Dev to webs {Coding…}

เรียนรู้การพัฒนาซอฟเวอร์ เพื่อความรู้ที่ยั่งยืน

บทที่ 13: การวนลูปด้วย x-for

1. ความเข้าใจเกี่ยวกับ x-for

x-for เป็นคำสั่งใน Alpine.js ที่ใช้สำหรับวนลูปแสดงรายการข้อมูล (List) ใน HTML Element โดยสามารถทำงานร่วมกับ Array, Object, หรือค่าที่ส่งมาจาก State

โครงสร้างพื้นฐาน: 

<template x-for="item in items"> <element x-text="item"></element> </template>
  • item คือแต่ละค่าภายใน items
  • items คือ Array หรือ Object ที่ต้องการวนลูป

2. การใช้งาน x-for กับ Array

ตัวอย่างพื้นฐาน:
<div x-data="{ items: ['Apple', 'Banana', 'Cherry'] }">
    <ul>
        <template x-for="item in items">
            <li x-text="item"></li>
        </template>
    </ul>
</div>

คำอธิบาย:

  • x-for="item in items" วนลูปผ่านค่าทั้งหมดใน Array items
  • แสดงผล: - Apple - Banana - Cherry

3. การใช้ Index ใน x-for

สามารถใช้งาน Index ของแต่ละรายการได้ด้วยโครงสร้าง:

<div x-data="{ items: ['Apple', 'Banana', 'Cherry'] }">
    <ul>
        <template x-for="(item, index) in items">
            <li x-text="`${index + 1}: ${item}`"></li>
        </template>
    </ul>
</div>

คำอธิบาย:

  • index คือตำแหน่งของแต่ละรายการใน Array
  • แสดงผล: 1: Apple 2: Banana 3: Cherry

4. การใช้งาน x-for กับ Object

ตัวอย่าง:
<div x-data="{ user: { name: 'John', age: 30, role: 'Admin' } }">
    <ul>
        <template x-for="(value, key) in user">
            <li x-text="`${key}: ${value}`"></li>
        </template>
    </ul>
</div>

คำอธิบาย:

  • key คือชื่อของ Property
  • value คือค่าของ Property นั้น
  • แสดงผล: name: John age: 30 role: Admin

5. การใช้ x-for กับค่าที่คำนวณได้

คุณสามารถใช้ JavaScript Expressions เพื่อสร้างข้อมูลสำหรับ x-for:

<div x-data="{ numbers: Array.from({ length: 5 }, (_, i) => i + 1) }">
    <ul>
        <template x-for="number in numbers">
            <li x-text="`Number: ${number}`"></li>
        </template>
    </ul>
</div>

คำอธิบาย:

  • ใช้ Array.from เพื่อสร้าง Array [1, 2, 3, 4, 5]
  • แสดงผล: Number: 1 Number: 2 Number: 3 Number: 4 Number: 5

6. การใช้ x-for ซ้อนกัน

สามารถใช้ x-for ซ้อนกันเพื่อสร้างรายการแบบซับซ้อนได้:

<div x-data="{ categories: [
    { name: 'Fruits', items: ['Apple', 'Banana'] },
    { name: 'Vegetables', items: ['Carrot', 'Broccoli'] }
] }">
    <ul>
        <template x-for="category in categories">
            <li>
                <strong x-text="category.name"></strong>
                <ul>
                    <template x-for="item in category.items">
                        <li x-text="item"></li>
                    </template>
                </ul>
            </li>
        </template>
    </ul>
</div>

คำอธิบาย:

  • วนลูป categories และแสดงชื่อหมวดหมู่
  • วนลูปรายการ items ภายในแต่ละหมวดหมู่
  • แสดงผล: Fruits - Apple - Banana Vegetables - Carrot - Broccoli

7. การใช้ Key เพื่อเพิ่มประสิทธิภาพ

เมื่อใช้ x-for ควรกำหนด Key เพื่อให้ Alpine.js จัดการการ Render ได้อย่างมีประสิทธิภาพ:

<div x-data="{ items: ['Apple', 'Banana', 'Cherry'] }">
    <ul>
        <template x-for="(item, index) in items" :key="index">
            <li x-text="item"></li>
        </template>
    </ul>
</div>

คำอธิบาย:

  • :key="index" ใช้กำหนด Key เพื่อช่วยลดการ Render ที่ไม่จำเป็น

8. การประยุกต์ใช้ x-for ในโปรเจกต์จริง

ตัวอย่าง: รายการสินค้าพร้อมราคาจาก Object
<div x-data="{ products: [
    { name: 'Laptop', price: 1000 },
    { name: 'Phone', price: 500 }
] }">
    <ul>
        <template x-for="product in products">
            <li>
                <strong x-text="product.name"></strong>: $<span x-text="product.price"></span>
            </li>
        </template>
    </ul>
</div>

ผลลัพธ์:

Laptop: $1000
Phone: $500

9. ข้อควรระวังในการใช้ x-for

  • อย่าใช้ x-for กับข้อมูลจำนวนมากเกินไปโดยไม่มี Key, อาจทำให้การ Render ช้าลง
  • ตรวจสอบว่าข้อมูลที่ส่งเข้ามาเป็น Array หรือ Object ที่ถูกต้อง

สรุป

ในบทนี้ คุณได้เรียนรู้วิธีใช้ x-for เพื่อแสดงข้อมูลในรูปแบบลิสต์ ทั้งจาก Array และ Object รวมถึงการเพิ่ม Key เพื่อเพิ่มประสิทธิภาพ ในบทถัดไป เราจะเรียนรู้วิธีผูกค่ากับฟอร์มโดยใช้ x-model!