原生JS如何将公交API返回的JSON segments数组转换为带图标的无序列表项

基础准备 #

• 在HTML中提前定义空的行程展示无序列表容器：<ul id="segments-container"></ul>
• 确保Material Icons基础样式已加载，可正常调用内置图标

核心实现逻辑 #

• 遍历API返回的segments数组，为每个行程段生成独立的<li>列表项
• 通过if/else if/else分支判断行程段类型，匹配对应的Material Icons图标：
  • 步行段：匹配directions_walk图标
  • 乘车段：匹配directions_bus图标
  • 换乘段：匹配transfer_within_a_station图标
  • 未知类型段：默认匹配help_outline兜底图标
• 组装每个列表项的内容结构，挂载到无序列表容器中完成渲染

可直接复用的原生JS实现代码 #

// 绑定行程列表容器
const segmentsContainer = document.getElementById('segments-container');
// 清空旧渲染内容，避免重复拼接
segmentsContainer.innerHTML = '';

// 遍历API返回的全部行程段
apiResponse.segments.forEach(segment => {
  // 创建单个行程段对应的<li>节点
  const segmentItem = document.createElement('li');
  let matchedIcon = '';

  // 按行程类型匹配图标
  if (segment.type === 'walking') {
    matchedIcon = 'directions_walk';
  } else if (segment.type === 'transit') {
    matchedIcon = 'directions_bus';
  } else if (segment.type === 'transfer') {
    matchedIcon = 'transfer_within_a_station';
  } else {
    matchedIcon = 'help_outline';
  }

  // 插入已完成的时间格式化逻辑、行程描述内容
  segmentItem.innerHTML = `
    <span class="material-icons">${matchedIcon}</span>
    <div class="segment-info">
      <span class="segment-time">${formatTime(segment.departureTime)} - ${formatTime(segment.arrivalTime)}</span>
      <p class="segment-text">${segment.instructions}</p>
    </div>
  `;

  // 将列表项添加到无序列表
  segmentsContainer.appendChild(segmentItem);
});

落地说明 #

• 全程使用原生JS实现，无需引入额外依赖
• 每个行程段严格对应独立<li>节点，完全满足无序列表的结构要求
• 后续新增行程类型时，仅需在判断分支中追加对应条件与图标值即可，无需改动核心渲染流程

内容的提问来源于stack exchange，提问作者Nandini Anaparti