如何用HTML/JS读取操作JSON文件？控制台仅输出元数据求助

问题分析 #

你当前的代码存在两个核心问题：

1. 页面加载时直接获取files，此时用户还未选择文件，得到的是空的FileList。
2. File对象仅包含文件元数据（名称、大小等），要读取文件内容必须使用FileReader API。

完整解决方案 #

以下是实现文件读取、合并、处理的完整代码，包含详细注释：

<input type="file" name="filefield" id="fileList" multiple="multiple" accept=".json">
<!-- 可选：添加图表容器 -->
<!-- <canvas id="dataChart" width="400" height="200"></canvas> -->

<script>
const fileInput = document.getElementById('fileList');
let allParsedJson = [];

// 监听文件选择事件，用户选完文件后触发
fileInput.addEventListener('change', async (event) => {
  const selectedFiles = event.target.files;
  allParsedJson = []; // 清空历史数据

  // 遍历所有选中的JSON文件
  for (const file of selectedFiles) {
    try {
      // 读取文件文本内容
      const fileText = await readFileContent(file);
      // 解析为JSON对象
      const jsonData = JSON.parse(fileText);
      allParsedJson.push(jsonData);
      console.log(`已读取文件 ${file.name}：`, jsonData);
    } catch (error) {
      console.error(`文件 ${file.name} 解析失败：`, error);
    }
  }

  // 合并所有JSON数据（根据你的数据结构调整合并逻辑）
  const mergedData = combineJsonData(allParsedJson);
  console.log('合并后的最终数据：', mergedData);

  // 处理数据并生成图表
  renderChart(mergedData);
});

// 封装文件读取为异步函数，简化代码
function readFileContent(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => resolve(e.target.result);
    reader.onerror = (err) => reject(err);
    reader.readAsText(file);
  });
}

// 自定义数据合并函数，根据你的实际需求修改
function combineJsonData(jsonArray) {
  // 场景1：每个JSON都是数组，合并为一个大数组
  return jsonArray.flat();

  // 场景2：每个JSON都是对象，合并为单个对象（重复键会被后面的覆盖）
  // return Object.assign({}, ...jsonArray);

  // 场景3：自定义合并逻辑，比如按特定字段分组
  // return jsonArray.reduce((acc, curr) => {
  //   // 你的自定义合并逻辑
  //   return acc;
  // }, {});
}

// 处理数据并渲染图表的示例函数
function renderChart(data) {
  // 这里可以根据你的数据结构做预处理，比如统计、过滤
  // 示例：假设数据是包含数值的数组，统计各值出现次数
  const stats = data.reduce((counts, item) => {
    const key = typeof item === 'object' ? item.id : item;
    counts[key] = (counts[key] || 0) + 1;
    return counts;
  }, {});

  console.log('数据统计结果：', stats);

  // 接入图表库示例（以Chart.js为例，需先引入库）
  // const ctx = document.getElementById('dataChart').getContext('2d');
  // new Chart(ctx, {
  //   type: 'bar',
  //   data: {
  //     labels: Object.keys(stats),
  //     datasets: [{
  //       label: '数据分布',
  //       data: Object.values(stats),
  //       backgroundColor: 'rgba(75, 192, 192, 0.2)'
  //     }]
  //   }
  // });
}
</script>

关键说明 #

• 事件监听：通过change事件确保在用户选择文件后再读取数据，避免空文件列表。
• FileReader异步读取：用Promise封装读取逻辑，避免回调嵌套，代码更清晰。
• JSON解析容错：添加try-catch捕获无效JSON文件的错误，防止程序崩溃。
• 灵活合并逻辑：combineJsonData函数可根据你的实际数据结构调整，比如合并数组、对象或自定义分组。
• 图表集成：在renderChart函数中接入Chart.js、ECharts等图表库，将处理后的数据可视化展示。

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