将 JSON 数据转换为按日期分组的 HTML 页面-js教程-PHP中文网

将 JSON 数据转换为按日期分组的 HTML 页面

花韻仙語

发布： 2025-09-16 17:04:01

原创

337人浏览过

将 json 数据转换为按日期分组的 html 页面

本文介绍如何将 JSON 数据转换为 HTML 页面，并按照日期对数据进行分组展示。我们将使用 JavaScript 处理 JSON 数据，并动态生成 HTML 结构，以便清晰地呈现每个日期对应的类别和时间信息。通过本文，你将学习如何有效地组织和展示结构化数据，提升用户体验。

将 JSON 数据转换为 HTML 页面，并按日期分组显示类别和时间，是一个常见的数据展示需求。以下是一种实现方法，它使用 JavaScript 对 JSON 数据进行处理，并动态生成 HTML 结构。

1. 数据准备

首先，我们需要一个包含数据的 JSON 数组。例如：

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

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

登录后复制

2. 数据分组

接下来，使用 JavaScript 将数据按日期进行分组。可以使用 reduce 方法来实现：

function groupDataByDate(data) {
  return data.reduce((acc, curr) => {
    const date = curr.date;
    if (!acc[date]) {
      acc[date] = [];
    }
    acc[date].push({ category: curr.category, time1: curr.time1 });
    return acc;
  }, {});
}

const groupedData = groupDataByDate(myArray);

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' }
  ]
}
*/

登录后复制

这段代码首先定义了一个 groupDataByDate 函数，它接受一个数据数组作为参数。然后，使用 reduce 方法遍历数组，并将具有相同日期的数据项放入同一个数组中。最后，返回一个以日期为键，包含类别和时间的数组为值的对象。

易笔AI论文

专业AI论文生成，免费生成论文大纲，在线生成选题/综述/开题报告等论文模板

103

查看详情

3. 生成 HTML

现在，可以根据分组后的数据动态生成 HTML。

function generateHTML(groupedData) {
  let html = '';
  for (const date in groupedData) {
    html += `<p>----------${date}-------------</p>`;
    groupedData[date].forEach(item => {
      html += `<p>${item.category} ${item.time1}</p>`;
    });
  }
  return html;
}

const htmlOutput = generateHTML(groupedData);

// 将生成的 HTML 插入到页面中
document.getElementById('output').innerHTML = htmlOutput;

登录后复制

这段代码定义了一个 generateHTML 函数，它接受分组后的数据作为参数。然后，它遍历分组后的数据，为每个日期创建一个分隔符 <p> 标签，并为每个类别和时间创建一个 <p> 标签。最后，将生成的 HTML 插入到 id 为 output 的 HTML 元素中。

4. 完整示例

<!DOCTYPE html>
<html>
<head>
  <title>JSON to HTML</title>
</head>
<body>
  <div id="output"></div>

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

    function groupDataByDate(data) {
      return data.reduce((acc, curr) => {
        const date = curr.date;
        if (!acc[date]) {
          acc[date] = [];
        }
        acc[date].push({ category: curr.category, time1: curr.time1 });
        return acc;
      }, {});
    }

    function generateHTML(groupedData) {
      let html = '';
      for (const date in groupedData) {
        html += `<p>----------${date}-------------</p>`;
        groupedData[date].forEach(item => {
          html += `<p>${item.category} ${item.time1}</p>`;
        });
      }
      return html;
    }

    const groupedData = groupDataByDate(myArray);
    const htmlOutput = generateHTML(groupedData);

    document.getElementById('output').innerHTML = htmlOutput;
  </script>
</body>
</html>

登录后复制

注意事项：