如何用Bootstrap卡片展示从外部API获取的JSON数组数据？

要实现把API获取的JSON数据渲染成Bootstrap卡片，你需要调整HTML结构并补充数据渲染的逻辑，以下是完整的解决代码和说明：

完整代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户数据展示</title>
    <!-- 引入Bootstrap样式，确保卡片能正常显示 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <h1 class="text-center mt-4">用户数据</h1>
    <!-- 用Bootstrap栅格容器承载卡片，自动适配不同屏幕宽度 -->
    <div class="container mt-4">
        <div class="row g-4" id="cards-container">
            <!-- 卡片会动态插入到这里 -->
        </div>
    </div>

    <script>
        const api_url = "https://api.airtable.com/v0/appBTaX8XIvvr6zEC/tblYPd5g5k5IKIc98?api_key=##";

        async function getAirtable() {
            const cardsContainer = document.getElementById('cards-container');
            // 先显示加载状态，提升用户体验
            cardsContainer.innerHTML = '<div class="col-12 text-center">加载中...</div>';

            try {
                const response = await fetch(api_url);
                if (!response.ok) throw new Error('数据请求失败');
                const data = await response.json();
                const allData = data.records.map((rec) => rec.fields);

                // 清空加载提示，开始生成卡片
                cardsContainer.innerHTML = '';

                // 遍历每个用户数据，生成Bootstrap卡片HTML
                allData.forEach(user => {
                    const cardHtml = `
                        <div class="col-md-4 col-sm-6">
                            <div class="card h-100">
                                <img src="${user.avatar}" class="card-img-top" alt="${user.Name}">
                                <div class="card-body">
                                    <h5 class="card-title">${user.Name}</h5>
                                    <p class="card-text">ID: ${user.Id}</p>
                                    <p class="card-text">职业: ${user.occupation}</p>
                                </div>
                            </div>
                        </div>
                    `;
                    // 将卡片插入容器
                    cardsContainer.insertAdjacentHTML('beforeend', cardHtml);
                });
            } catch (error) {
                // 处理错误场景，给用户提示
                cardsContainer.innerHTML = `<div class="col-12 text-center text-danger">加载失败: ${error.message}</div>`;
            }
        }

        // 调用函数，触发数据获取和渲染
        getAirtable();
    </script>
</body>
</html>

核心调整说明 #

• 引入Bootstrap：在head中添加Bootstrap的CSS链接，确保卡片样式生效。
• 优化HTML结构：使用container+row的Bootstrap栅格布局，让卡片在大屏显示3列、中屏2列、小屏1列，自动适配不同设备。
• 动态渲染逻辑：
  1. 先显示加载状态，避免页面空白。
  2. 遍历API返回的用户数组，为每个用户生成符合Bootstrap规范的卡片HTML代码。
  3. 通过insertAdjacentHTML将卡片插入到容器中。
• 错误处理：加入try-catch捕获请求或数据解析错误，给用户明确的失败提示。
• 触发函数执行：最后调用getAirtable()，否则数据获取逻辑不会自动运行。

内容的提问来源于stack exchange，提问作者Rick Derick