昨天我們學會了用 fetch() 呼叫 API、把遠端的資料抓回來。但當時我們只是把資料乖乖印在主控台（Console）的黑盒子裡，使用者根本看不見啊！

今天，我們就要把前面的大絕招全部串在一起：把 API 抓到的資料透過迴圈跟 DOM，動態變成網頁上一張張精美的卡片！

串接邏輯三部曲：抓資料 ➡️ 跑迴圈 ➡️ 丟上畫面

想像一下你在設計電商網站時的流程：

1. 發送請求:網頁一打開，立刻向伺服器要一整排商品清單（陣列格式）。
2. 拆解與迭代： 拿到一長串資料後，用迴圈一筆一筆把它們拿出來。
3. 動態渲染（Render）： 為每一筆資料動態生出 HTML 卡片，塞進畫面的容器裡。

程式碼實作範例

我們用免費公開的使用者列表 API 來示範如何把多筆資料動態顯示在畫面上：
HTML 結構（準備一個放卡片的容器）：

<div class="container">
    <h2>即時會員名單</h2>
    <!-- 之後 JS 抓到的卡片都會被塞進這個容器裡 -->
    <div id="user-card-list" class="card-grid"></div>
</div>

JavaScript 串接與動態生成邏輯：

// 1. 抓取畫面的卡片容器
const cardContainer = document.querySelector('#user-card-list');

// 2. 宣告一個非同步函式來抓資料並渲染
async function loadUsers() {
    try {
        // 從公開 API 抓取 5 位使用者的資料
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        const users = await response.json();

        // 3. 用迴圈（或 .forEach）把陣列裡的每個人抓出來
        users.forEach(function(user) {
            // 針對每個人，動態建立一個卡片 div
            const card = document.createElement('div');
            card.classList.add('user-card'); // 加上 CSS 樣式類別

            // 把使用者的名字跟信箱寫進卡片結構裡
            card.innerHTML = `
                <h3>${user.name}</h3>
                <p>電子郵件：${user.email}p>
                <p>居住城市：${user.address.city}</p>
            `;

            // 4. 把這張做好的卡片塞進大容器裡！
            cardContainer.appendChild(card);
        });

    } catch (error) {
        console.log("資料載入失敗：", error);
    }
}

// 網頁一載動就執行這支函式
loadUsers();

為什麼這步超重要？

這段程式碼幾乎涵蓋了現代前端工程的精髓：

• innerHTML：可以讓我們直接用字串塞入一段完整的 HTML 結構，省去一個一個 tag 慢慢建立的麻煩。
• 當你把這段代碼跑起來，你會發現原本空白的網頁，在幾毫秒內就自動長出了好幾張精美的會員卡片。這就是動態網頁（Dynamic Web）的真正魅力！

今日小結

今天我們把 Fetch API、迴圈、與 DOM 動態生成 完美結合，做出了會自己長出內容的卡片清單。這已經完全具備現代網頁應用程式（Web App）的雛形了！

掌握了資料渲染後，明天我們要來聊聊當使用者在網站上輸入關鍵字時，怎麼做一個即時的搜尋與過濾功能！