如何用JavaScript读取本地JSON文件并打印数据？

嘿，作为JS新手，读取本地JSON文件其实分**Node.js环境（本地运行脚本）和浏览器环境（网页中操作）**两种场景，我给你分别写了超简单的代码，注释都标清楚了，一看就懂！

场景1：Node.js环境（适合直接在本地运行JS脚本） #

如果你的需求是在本地终端里运行代码读取文件，用Node.js最方便——它是JS的后端运行环境，内置了读取文件的模块，不用额外安装东西。

步骤： #

1. 确保你已经安装了Node.js（没装的话去官网下一个，一路下一步就行）
2. 在本地创建一个JS文件，比如叫read-news.js
3. 把下面的代码复制进去：

// 导入Node.js自带的文件系统和路径模块
const fs = require('fs');
const path = require('path');

// 用绝对路径定位你的JSON文件（避免相对路径的坑，新手必备！）
// __dirname代表当前JS文件所在的文件夹路径，再往上一级找news_data.json
const jsonFilePath = path.join(__dirname, '../news_data.json');

try {
  // 同步读取文件内容（新手用同步更直观，不用搞异步回调）
  const rawJsonContent = fs.readFileSync(jsonFilePath, 'utf8');
  // 把JSON字符串转换成JS能直接用的对象/数组
  const newsData = JSON.parse(rawJsonContent);
  
  // 用console.table打印，数据结构一目了然！
  console.log('读取到的新闻数据：');
  console.table(newsData);
} catch (error) {
  // 处理可能的错误（比如文件找不到、JSON格式写错了）
  console.error('哎呀，出问题啦：', error.message);
}

4. 打开终端，进入这个JS文件所在的文件夹，运行命令：

node read-news.js

然后就能看到终端里打印出你的新闻数据啦！

场景2：浏览器环境（网页中读取本地文件） #

浏览器出于安全限制，不能直接偷偷读取你的本地文件，必须让用户主动选择文件才行。下面是一个简单的网页示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>读取本地JSON文件</title>
</head>
<body>
  <h3>点击下面的按钮选择你的news_data.json文件</h3>
  <!-- 让用户选择JSON文件的输入框 -->
  <input type="file" id="jsonFilePicker" accept=".json">

  <!-- 用来显示数据的区域 -->
  <div id="dataDisplay" style="margin-top: 20px; white-space: pre-wrap;"></div>

  <script>
    // 获取文件选择框和数据显示区域
    const filePicker = document.getElementById('jsonFilePicker');
    const displayArea = document.getElementById('dataDisplay');

    // 当用户选择文件时触发
    filePicker.addEventListener('change', function(e) {
      // 获取用户选中的文件
      const selectedFile = e.target.files[0];
      if (!selectedFile) return;

      // 创建FileReader对象来读取文件内容
      const reader = new FileReader();

      // 当文件读取完成后执行
      reader.onload = function(event) {
        try {
          // 解析JSON内容
          const newsData = JSON.parse(event.target.result);
          
          // 打印到浏览器控制台（按F12可以看到）
          console.log('新闻数据：', newsData);
          // 同时把数据显示在页面上，格式化后更易读
          displayArea.textContent = JSON.stringify(newsData, null, 2);
        } catch (error) {
          displayArea.textContent = '解析出错啦：' + error.message;
        }
      };

      // 以文本形式读取文件
      reader.readAsText(selectedFile);
    });
  </script>
</body>
</html>

用法： #

把这段代码保存成read-json.html，用浏览器打开它，点击选择文件按钮，选中你的news_data.json，页面上就会显示出数据啦，同时按F12打开控制台也能看到打印的内容。

新手小提醒： #

• 如果你用Node.js，注意相对路径的问题：../news_data.json是相对于当前JS文件的上一级目录，用path.join(__dirname, ...)能避免很多路径错误
• 一定要处理错误！比如JSON文件格式写错了（少个逗号之类的），或者文件找不到，代码里的try...catch就是干这个的
• 浏览器里不能直接读取本地文件，必须用户主动选择，这是浏览器的安全规则哦

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