怎么调用本地的json文件内容

如何在项目中调用本地JSON文件内容？一篇搞定！

在Web开发、数据可视化、移动应用开发乃至各种脚本编程中，JSON（JavaScript Object Notation）因其轻量级、易读易写的特性，常被用作数据交换的格式，将数据存储在本地的JSON文件中，然后通过程序调用这些数据，是一个非常常见的需求，具体该怎么调用本地的JSON文件内容呢？本文将针对不同开发场景，详细介绍几种主流方法。

Web前端开发中调用本地JSON文件

在Web前端,主要有以下几种方式来调用本地JSON文件：

使用fetch API (推荐，现代浏览器支持)

fetch API是现代浏览器提供的一种用于获取资源的强大接口，它返回一个Promise，使得异步处理更加优雅。

步骤：

• 确保JSON文件与HTML文件同源或正确处理CORS：如果直接在本地打开HTML文件（通过file://协议），某些浏览器可能会因为安全限制而阻止fetch请求，更好的方式是通过本地服务器（如VS Code的Live Server插件、Python的http.server等）来运行你的HTML文件。

• 编写fetch代码：

  // 假设你的JSON文件名为data.json，与HTML在同一目录
  fetch('data.json')
    .then(response => {
      // 检查响应是否成功
      if (!response.ok) {
        throw new Error('Network response was not ok ' + response.statusText);
      }
      // 将响应体解析为JSON
      return response.json();
    })
    .then(data => {
      // 在这里处理获取到的JSON数据
      console.log('成功获取JSON数据:', data);
      // 将数据显示在页面上
      const appElement = document.getElementById('app');
      appElement.innerHTML = `<h1>${data.title}</h1><p>${data.content}</p>`;
    })
    .catch(error => {
      // 处理请求过程中可能出现的错误
      console.error('获取JSON数据时出错:', error);
    });

使用XMLHttpRequest (XHR) (传统方式)

XMLHttpRequest是一个较老但仍然广泛支持的API，用于在后台与服务器交换数据。

步骤：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true); // true表示异步请求
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功，响应数据在xhr.responseText中
    const data = JSON.parse(xhr.responseText);
    console.log('成功获取JSON数据 (XHR):', data);
    // 处理数据
  } else if (xhr.readyState === 4) {
    // 请求失败
    console.error('获取JSON数据时出错 (XHR):', xhr.status, xhr.statusText);
  }
};
xhr.send();

直接内联JSON (适用于小型、静态数据)

如果你的JSON数据量很小,并且是静态不变的，也可以直接将其内容嵌入到HTML或JavaScript文件中。

示例：

<script>
  const myData = {
    "name": "张三",
    "age": 30,
    "city": "北京"
  };
  // 直接使用myData
  console.log(myData.name);
</script>

或者在一个<script>标签中指定类型为application/json（但注意，这种方式数据并非“文件”调用，而是直接嵌入）：

<script type="application/json" id="my-json-data">
  {
    "name": "李四",
    "age": 25,
    "city": "上海"
  }
</script>
<script>
  const dataElement = document.getElementById('my-json-data');
  const data = JSON.parse(dataElement.textContent);
  console.log(data.name);
</script>

Node.js环境中调用本地JSON文件

在Node.js后端服务中，读取本地JSON文件通常使用内置的fs（File System）模块。

使用fs.readFileSync (同步方式)

这种方式会阻塞代码执行,直到文件读取完成，适用于在程序启动时加载配置等场景。

const fs = require('fs');
const path = require('path');
// 指定JSON文件路径
const jsonFilePath = path.join(__dirname, 'data.json');
try {
  // 同步读取文件内容
  const fileData = fs.readFileSync(jsonFilePath, 'utf8');
  // 解析JSON字符串为JavaScript对象
  const jsonData = JSON.parse(fileData);
  console.log('成功获取JSON数据 (同步):', jsonData);
  // 处理数据
} catch (error) {
  console.error('读取或解析JSON文件时出错 (同步):', error);
}

使用fs.readFile (异步方式，推荐)

异步方式不会阻塞代码执行,更适合I/O密集型操作，是Node.js中更推荐的做法。

const fs = require('fs');
const path = require('path');
const jsonFilePath = path.join(__dirname, 'data.json');
fs.readFile(jsonFilePath, 'utf8', (err, data) => {
  if (err) {
    console.error('读取JSON文件时出错 (异步回调):', err);
    return;
  }
  try {
    const jsonData = JSON.parse(data);
    console.log('成功获取JSON数据 (异步回调):', jsonData);
    // 处理数据
  } catch (parseError) {
    console.error('解析JSON数据时出错 (异步回调):', parseError);
  }
});

使用fs.promises (Promise方式，更现代)

如果你更喜欢使用Promise和async/await语法，可以使用fs.promises API。

const fs = require('fs').promises;
const path = require('path');
async function getJsonData() {
  const jsonFilePath = path.join(__dirname, 'data.json');
  try {
    const fileData = await fs.readFile(jsonFilePath, 'utf8');
    const jsonData = JSON.parse(fileData);
    console.log('成功获取JSON数据 (Promise/async):', jsonData);
    return jsonData;
  } catch (error) {
    console.error('读取或解析JSON文件时出错 (Promise/async):', error);
    throw error; // 可以选择重新抛出错误或处理
  }
}
// 调用函数
getJsonData()
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    // 错误已在getJsonData中处理，或在这里进一步处理
  });

其他开发环境中的调用方式

Python中调用本地JSON文件

Python内置了json模块，非常方便。

import json
import os
# JSON文件路径
json_file_path = 'data.json'
try:
    with open(json_file_path, 'r', encoding='utf-8') as f:
        data = json.load(f)  # 直接将文件内容解析为Python字典或列表
    print("成功获取JSON数据 (Python):", data)
    # 处理数据
except FileNotFoundError:
    print(f"错误：文件 {json_file_path} 未找到")
except json.JSONDecodeError:
    print(f"错误：文件 {json_file_path} 不是有效的JSON格式")
except Exception as e:
    print(f"读取JSON文件时发生错误: {e}")

移动应用开发 (如React Native, Flutter)

• React Native:

  • 可以将JSON文件放在assets目录下。
  • 使用react-native-fs等第三方库访问应用沙盒内的文件。
  • 对于打包在assets中的文件,可以使用@react-native-async-storage/async-storage或其他方式结合fs读取，或者使用require（但有限制，通常用于开发时静态资源）。

  // 示例：使用require (仅适用于打包在assets中且较小的文件，React 0.59+可能不推荐)
  // 需要在android/app/build.gradle中设置
  // sourceSets.main {
  //     assets.srcDirs += ['src/main/assets']
  // }
  // 然后放在src/main/assets/data.json
  // try {
  //   const jsonData = require('./assets/data.json');
  //   console.log(jsonData);
  // } catch (e) {
  //   console.error(e);
  // }

• Flutter:

  • 将JSON文件放在assets文件夹下，并在pubspec.yaml中声明。
  • 使用rootBundle加载。

  # pubspec.yaml
  flutter:
    assets:
      - assets/data.json

  import 'dart:convert';
  import 'package:flutter/services.dart' show rootBundle;
  Future<void> loadJsonAsset() async {
    try {
      String jsonString = await rootBundle.loadString('assets/data.json');
      final jsonData = json.decode(jsonString);
      print('成功获取JSON数据 (Flutter): $jsonData');
      // 处理数据
    } catch (e) {
      print('加载JSON资源时出错: $e');
    }
  }

注意事项

1