可以使用 JavaScript 和 HTML 来实现按类别显示 JSON 数据。首先，需要创建一个用于显示数据的 HTML 表格，如下所示：

  

    

      
Category
      
Item
    
  
  

然后，需要使用 JavaScript 将 JSON 数据加载到表格中，并根据类别进行分组。以下是示例代码：

const dataUrl = 'https://example.com/data.json';

// 获取数据
fetch(dataUrl)
  .then(response => response.json())
  .then(data => {
    const groupedData = groupByCategory(data);
    displayData(groupedData);
  })
  .catch(error => console.error('Error:', error));

// 按类别分组数据
function groupByCategory(data) {
  const groupedData = {};
  data.forEach(item => {
    if (groupedData[item.category]) {
      groupedData[item.category].push(item);
    } else {
      groupedData[item.category] = [item];
    }
  });
  return groupedData;
}

// 在表格中显示数据
function displayData(data) {
  const tableBody = document.querySelector('#data-table tbody');
  for (const category in data) {
    const categoryHeader = document.createElement('tr');
    categoryHeader.innerHTML = `${category}`;
    tableBody.appendChild(categoryHeader);
    data[category].forEach(item => {
      const row = document.createElement('tr');
      row.innerHTML = `${item.category}${item.item}`;
      tableBody.appendChild(row);
    });
  }
}

此代码将根据数据中的类别，将表格中的行分组，并在每个类别组之前插入类别标题行。注意，该示例代码使用 ES6 的箭头函数和模板字面量语法。