JavaScript动态生成Bootstrap卡片：API数据展示的最佳实践

<div class="card">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">卡片正文内容，可以包含描述、摘要等。</p>
    <!-- 更多内容，如按钮、列表组等 -->
  </div>
</div>

/**
 * 根据API数据更新结果容器，并将其显示为Bootstrap卡片。
 * @param {Object} data - 从API获取的数据对象，包含一个 businesses 数组。
 * @param {Object} userLocation - 用户位置信息（如果适用）。
 */
function updateResults(data, userLocation) {
  const resultsContainer = document.getElementById("results-container");
  // 清除现有结果，确保每次更新都是全新的内容
  resultsContainer.innerHTML = "";

  // 假设 initMap 函数处理地图显示，与卡片生成独立
  // initMap(userLocation, mapContainer, data.businesses);

  // 遍历API返回的每个商家数据
  data.businesses.forEach(result => {
    // 1. 创建主卡片容器
    const cardElement = document.createElement("div");
    // 应用Bootstrap的 'card' 类，并添加 'mb-3' 提供底部间距
    cardElement.className = 'card mb-3';
    // 可选：设置卡片宽度，例如 cardElement.style.width = '18rem';

    // 2. 创建图片元素
    const imageElement = document.createElement("img");
    imageElement.src = result.image_url;
    imageElement.alt = result.name; // 为图片添加描述性文本，提高可访问性
    // 应用Bootstrap的 'card-img-top' 类
    imageElement.className = 'card-img-top';
    // 原始样式可以保留或通过CSS类控制，这里仅作示例
    // imageElement.style.objectFit = "cover";

    // 3. 创建卡片主体内容容器
    const cardBody = document.createElement('div');
    // 应用Bootstrap的 'card-body' 类
    cardBody.className = 'card-body';

    // 4. 创建标题元素
    const nameElement = document.createElement("h5"); // 通常使用 h5 或 h6 作为卡片标题
    // 应用Bootstrap的 'card-title' 类
    nameElement.className = 'card-title';
    const nameLink = document.createElement("a");
    nameLink.href = result.url;
    nameLink.innerText = result.name;
    nameLink.target = '_blank'; // 在新标签页打开链接
    nameLink.rel = 'noopener noreferrer'; // 安全性考虑
    nameElement.appendChild(nameLink);

    // 5. 创建地址元素
    const addressElement = document.createElement("p");
    addressElement.className = 'card-text'; // 应用Bootstrap的 'card-text' 类
    addressElement.innerText = `地址: ${result.location.display_address.join(", ")}`;

    // 6. 创建距离元素
    const distanceElement = document.createElement("p");
    distanceElement.className = 'card-text';
    if (result.distance_data && result.distance_data.distance) {
      distanceElement.innerText = `距离: ${result.distance_data.distance.text}`;
    }

    // 7. 创建时长元素
    const durationElement = document.createElement("p");
    durationElement.className = 'card-text';
    if (result.distance_data && result.distance_data.duration) {
      durationElement.innerText = `时长: ${result.distance_data.duration.text}`;
    }

    // 8. 创建价格元素
    const priceElement = document.createElement("p");
    priceElement.className = 'card-text';
    priceElement.innerText = `价格: ${result.price || 'N/A'}`; // 如果价格不存在，显示 'N/A'

    // 9. 创建评分元素
    const ratingElement = document.createElement("p");
    ratingElement.className = 'card-text';
    ratingElement.innerText = `评分: ${result.rating} 星`;

    // 10. 将所有内容元素添加到 cardBody
    cardBody.appendChild(nameElement);
    cardBody.appendChild(addressElement);
    cardBody.appendChild(distanceElement);
    cardBody.appendChild(durationElement);
    cardBody.appendChild(priceElement);
    cardBody.appendChild(ratingElement);

    // 11. 将图片和 cardBody 添加到主卡片容器
    cardElement.appendChild(imageElement);
    cardElement.appendChild(cardBody);

    // 12. 将完整的卡片添加到页面上的结果容器中
    resultsContainer.appendChild(cardElement);
  });
}