如何将JSON数据转换为按日期分组展示分类+time1的HTML页面

1. 数据分组处理 #

先用JavaScript把原始数组按日期分组，方便后续展示：

const myArray = [
  { 'category': 'apple', 'date': '20/4/2023', 'time1': '12:30' },
  { 'category': 'banana', 'date': '20/4/2023', 'time1': '12:32' },
  { 'category': 'tv', 'date': '21/4/2023', 'time1': '12:34' },
  { 'category': 'banana', 'date': '21/4/2023', 'time1': '12:39' },
];

// 按日期分组，将相同日期的条目归为一组
const groupedByDate = myArray.reduce((result, currentItem) => {
  const dateKey = currentItem.date;
  if (!result[dateKey]) {
    result[dateKey] = [];
  }
  result[dateKey].push({
    category: currentItem.category,
    time1: currentItem.time1
  });
  return result;
}, {});

2. 生成HTML展示内容 #

接下来将分组后的数据渲染到页面，有两种方式可选：

方式一：用普通HTML元素构建结构

先在页面中添加一个容器：

<div id="data-display"></div>

然后编写渲染逻辑：

const displayContainer = document.getElementById('data-display');

// 遍历每个日期分组
Object.keys(groupedByDate).forEach(date => {
  // 创建日期标题行
  const dateTitle = document.createElement('div');
  dateTitle.textContent = `----------${date}-------------`;
  dateTitle.style.margin = '8px 0';
  displayContainer.appendChild(dateTitle);

  // 创建该日期下的所有条目
  const itemsWrapper = document.createElement('div');
  groupedByDate[date].forEach(item => {
    const itemLine = document.createElement('div');
    itemLine.textContent = `${item.category} ${item.time1}`;
    itemsWrapper.appendChild(itemLine);
  });
  displayContainer.appendChild(itemsWrapper);
});

方式二：用pre标签模拟纯文本格式

如果想要完全匹配你给出的纯文本样式，用pre标签更方便：

<pre id="text-display"></pre>

渲染逻辑：

const textDisplay = document.getElementById('text-display');
let displayContent = '';

// 拼接文本内容
Object.keys(groupedByDate).forEach(date => {
  displayContent += `----------${date}-------------\n`;
  groupedByDate[date].forEach(item => {
    displayContent += `${item.category} ${item.time1}\n`;
  });
});

textDisplay.textContent = displayContent;

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