如何通过分组，用HTML和JavaScript优雅展示JSON数据行？

嘿，我懂你花好几个小时抠问题的滋味——有时候答案真的就在眼前却没发现！针对你手里的这套课程会话数据，我给你整了个用HTML+JavaScript实现的按周分组展示方案，布局清爽还易扩展。

核心思路 #

1. 先把原始数组按unitsession_weekno字段分组，把同一周的Lecture、Practical归类到一起
2. 动态生成HTML结构，用分组标题+卡片列表的形式展示，搭配简单CSS让界面更优雅

完整代码实现 #

HTML 结构

<div id="session-container" class="session-container"></div>

<style>
/* 基础样式，让界面更美观 */
.session-container {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.week-group {
  margin-bottom: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
}

.week-title {
  background-color: #2c3e50;
  color: white;
  padding: 1rem;
  margin: 0;
  font-size: 1.2rem;
}

.session-list {
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

.session-card {
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 4px;
}

.session-card h3 {
  margin-top: 0;
  color: #34495e;
}

.session-type {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  color: white;
  margin-bottom: 0.5rem;
}

.type-lecture {
  background-color: #3498db;
}

.type-practical {
  background-color: #2ecc71;
}
</style>

JavaScript 逻辑

// 你的原始数据数组
const sessionData = [
  { unitsession_id: 19, unitsession_title: 'Lecture week 1', unitsession_description: 'Week 1 lecture', unitsession_type: 'Lecture', unitsession_weekno: 1, unitsession_unit_id: 5 },
  { unitsession_id: 20, unitsession_title: 'Practical 1', unitsession_description: 'Week 1 practical', unitsession_type: 'Practical', unitsession_weekno: 1, unitsession_unit_id: 5 },
  // 这里可以添加更多数据项
];

// 第一步：按周分组数据
const groupedByWeek = sessionData.reduce((groups, session) => {
  const week = session.unitsession_weekno;
  if (!groups[week]) {
    groups[week] = [];
  }
  groups[week].push(session);
  return groups;
}, {});

// 第二步：渲染分组后的内容到页面
const container = document.getElementById('session-container');

// 遍历每个周分组，先按周数排序保证顺序正确
Object.keys(groupedByWeek).sort((a, b) => a - b).forEach(week => {
  // 创建周分组容器
  const weekGroup = document.createElement('div');
  weekGroup.className = 'week-group';

  // 创建周标题
  const weekTitle = document.createElement('h2');
  weekTitle.className = 'week-title';
  weekTitle.textContent = `Week ${week}`;
  weekGroup.appendChild(weekTitle);

  // 创建会话列表容器
  const sessionList = document.createElement('div');
  sessionList.className = 'session-list';

  // 遍历当前周的所有会话
  groupedByWeek[week].forEach(session => {
    const sessionCard = document.createElement('div');
    sessionCard.className = 'session-card';

    // 会话类型标签
    const typeTag = document.createElement('span');
    typeTag.className = `session-type type-${session.unitsession_type.toLowerCase()}`;
    typeTag.textContent = session.unitsession_type;
    sessionCard.appendChild(typeTag);

    // 会话标题
    const title = document.createElement('h3');
    title.textContent = session.unitsession_title;
    sessionCard.appendChild(title);

    // 会话描述
    const description = document.createElement('p');
    description.textContent = session.unitsession_description;
    sessionCard.appendChild(description);

    sessionList.appendChild(sessionCard);
  });

  weekGroup.appendChild(sessionList);
  container.appendChild(weekGroup);
});

代码说明 #

• 分组逻辑：用Array.reduce()把相同周数的会话归为一组，返回一个以周数为键、会话数组为值的对象，确保同周内容不会分散
• 渲染逻辑：先把周数按数字排序，保证展示顺序是从第1周开始递增，然后逐个生成分组区块，用响应式网格布局适配不同屏幕尺寸
• 样式优化：用阴影、圆角提升质感，不同颜色的标签区分Lecture和Practical，让内容层级更清晰

你可以根据自己的需求调整样式，或者添加unitsession_id等更多字段展示~

内容的提问来源于stack exchange，提问作者Danny Sanderson