JavaScript：将JSON数组按日期分组并格式化输出到HTML-js教程-PHP中文网

JavaScript：将JSON数组按日期分组并格式化输出到HTML

花韻仙語

发布： 2025-09-16 15:54:23

原创

1042人浏览过

javascript：将json数组按日期分组并格式化输出到html

本教程详细介绍了如何利用JavaScript处理JSON数组，将其中的数据按日期字段进行分组，并最终生成符合特定格式要求的HTML页面或文本输出。我们将重点讲解reduce方法进行数据聚合，并演示如何遍历分组后的数据以构建结构化的显示内容，确保数据以日期为标题，其下展示对应的分类和时间信息。

在前端开发中，我们经常需要将从后端获取的扁平化JSON数据转换为更具可读性和结构化的展示形式。一个常见的场景是，将包含日期、类别和时间等信息的列表，按照日期进行分组，并在每个日期下显示对应的详细条目。本文将指导您完成这一转换过程。

1. 理解原始数据结构

我们首先来看一个典型的JSON数组示例。每个对象都包含category（类别）、date（日期）和time1（时间）字段。

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' },
];

登录后复制

我们的目标是将其转换为以下格式的输出：

----------20/4/2023-------------
apple 12:30
banana 12:32
----------21/4/2023-------------
tv 12:34
banana 12:39

登录后复制

2. 数据分组：使用Array.prototype.reduce()

实现数据分组最有效的方法之一是使用JavaScript数组的reduce()方法。reduce()方法对数组中的每个元素执行一个由您提供的reducer函数，将其结果汇总为单个返回值。

立即学习“Java免费学习笔记（深入）”；

在这个场景中，我们将reduce()用于创建一个新的对象，其中键是日期，值是该日期下所有相关条目的数组。

const groupedData = myArray.reduce((accumulator, currentItem) => {
  const date = currentItem.date;
  // 如果accumulator中还没有这个日期作为键，则创建一个空数组
  if (!accumulator[date]) {
    accumulator[date] = [];
  }
  // 将当前项的相关信息（类别和时间）推入对应日期的数组
  accumulator[date].push({ category: currentItem.category, time1: currentItem.time1 });
  return accumulator; // 返回更新后的accumulator
}, {}); // 初始accumulator是一个空对象

console.log(groupedData);
/*
输出示例:
{
  '20/4/2023': [
    { category: 'apple', time1: '12:30' },
    { category: 'banana', time1: '12:32' }
  ],
  '21/4/2023': [
    { category: 'tv', time1: '12:34' },
    { category: 'banana', time1: '12:39' }
  ]
}
*/

登录后复制

代码解析：

Hour One

AI文字到视频生成

查看详情

accumulator (acc)：累加器，它在每次迭代中存储reduce函数的返回值，并作为下一次迭代的第一个参数。在这里，它将构建最终的分组对象。
currentItem (curr)：数组中正在处理的当前元素。
currentItem.date：提取当前元素的日期。
if (!accumulator[date]) { accumulator[date] = []; }：这是一个关键步骤。它检查accumulator对象是否已经有了当前日期作为键。如果没有，它就为该日期创建一个新的空数组。
accumulator[date].push(...)：将当前条目的category和time1信息作为一个新对象推入对应日期的数组中。
{}：reduce方法的第二个参数，表示accumulator的初始值，这里是一个空对象。

3. 格式化输出到HTML或文本

数据分组完成后，下一步是遍历groupedData对象，并按照期望的格式生成输出字符串。这个字符串可以直接打印到控制台，也可以插入到HTML页面中。

let outputString = '';

// 遍历groupedData对象，键是日期，值是该日期下的条目数组
for (const date in groupedData) {
  // 确保只处理对象自身的属性，而不是原型链上的属性
  if (Object.hasOwnProperty.call(groupedData, date)) {
    // 添加日期标题行
    outputString += `----------${date}-------------\n`;

    // 遍历该日期下的所有条目
    groupedData[date].forEach(item => {
      outputString += `${item.category} ${item.time1}\n`;
    });
  }
}

console.log(outputString);

登录后复制

代码解析：

for (const date in groupedData)：循环遍历groupedData对象的所有键（即日期）。
Object.hasOwnProperty.call(groupedData, date)：这是一个最佳实践，用于确保我们只处理对象自身的属性，避免遍历到原型链上的属性。
outputString += \----------${date}-------------\n`;：使用模板字符串方便地构建日期标题行。\n`用于换行。
groupedData[date].forEach(item => { ... });：对于每个日期，我们遍历其对应的条目数组，并为每个条目生成category time1格式的行。

4. 完整代码示例

将上述两个步骤结合起来，形成一个完整的解决方案：

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' },
];

// 步骤 1: 按日期分组数据
const groupedData = myArray.reduce((accumulator, currentItem) => {
  const date = currentItem.date;
  if (!accumulator[date]) {
    accumulator[date] = [];
  }
  accumulator[date].push({ category: currentItem.category, time1: currentItem.time1 });
  return accumulator;
}, {});

// 步骤 2: 格式化输出字符串
let outputString = '';
for (const date in groupedData) {
  if (Object.hasOwnProperty.call(groupedData, date)) {
    outputString += `----------${date}-------------\n`;
    groupedData[date].forEach(item => {
      outputString += `${item.category} ${item.time1}\n`;
    });
  }
}

console.log(outputString);

// 如果要在HTML页面中显示，可以这样做：
// const outputElement = document.getElementById('output'); // 假设有一个id为'output'的pre或div元素
// if (outputElement) {
//   outputElement.textContent = outputString; // 使用textContent避免HTML注入风险
//   // 或者如果需要渲染为HTML结构，则需要构建DOM元素
//   // let htmlOutput = '';
//   // for (const date in groupedData) {
//   //   if (Object.hasOwnProperty.call(groupedData, date)) {
//   //     htmlOutput += `<h3>----------${date}-------------</h3>`;
//   //     groupedData[date].forEach(item => {
//   //       htmlOutput += `<p>${item.category} ${item.time1}</p>`;
//   //     });
//   //   }
//   // }
//   // outputElement.innerHTML = htmlOutput;
// }

登录后复制

5. 注意事项与优化

日期格式一致性：确保JSON数据中的日期格式保持一致，否则分组将无法正确进行。如果日期格式多样，您可能需要在分组前对其进行标准化处理。
性能考量：对于非常庞大的数据集，reduce方法通常是高效的。但如果数据量极其巨大，可能需要考虑流式处理或后端聚合。
HTML渲染：上述示例生成的是一个纯文本字符串。若要将其渲染到HTML页面中，您应将\n替换为<br>标签，并考虑使用document.createElement和appendChild等DOM操作方法来动态创建HTML元素，而不是直接使用innerHTML，以避免潜在的XSS（跨站脚本攻击）风险。
错误处理：在实际应用中，您可能需要添加逻辑来处理数据中可能缺失category、date或time1字段的情况。

日期排序：for...in循环遍历对象的属性时，属性的顺序不保证是按照日期顺序的。如果需要按日期顺序显示，您需要先获取groupedData的所有键（日期），然后对这些日期进行排序，再按排序后的日期顺序遍历。

const sortedDates = Object.keys(groupedData).sort((a, b) => {
  // 假设日期格式是 DD/MM/YYYY，需要转换为可比较的格式
  const [dayA, monthA, yearA] = a.split('/').map(Number);
  const [dayB, monthB, yearB] = b.split('/').map(Number);
  const dateA = new Date(yearA, monthA - 1, dayA);
  const dateB = new Date(yearB, monthB - 1, dayB);
  return dateA.getTime() - dateB.getTime();
});

let sortedOutputString = '';
for (const date of sortedDates) {
  sortedOutputString += `----------${date}-------------\n`;
  groupedData[date].forEach(item => {
    sortedOutputString += `${item.category} ${item.time1}\n`;
  });
}
console.log(sortedOutputString);

登录后复制