如何修改外部 json 文件 javascript

对于 JavaScript 程序员，有时需要在运行时从外部 JSON 文件中读取数据，并进行修改。这篇文章会介绍如何使用 JavaScript 修改外部 JSON 文件。

读取 JSON 文件

首先，我们需要读取外部 JSON 文件。在 Node.js 环境中，我们可以使用内置的 fs 模块来读写文件。

const fs = require('fs');

const data = fs.readFileSync('path/to/your/json/file.json');
const jsonData = JSON.parse(data);

上面的代码中，我们使用 fs 模块的 readFileSync 方法读取文件内容，并使用 JSON.parse 方法将 JSON 字符串转换成 JavaScript 对象。

如果你不是在 Node.js 环境中运行，而是在浏览器端，那么你可以使用 fetch API 或 XMLHttpRequest 来读取外部 JSON 文件。

fetch('path/to/your/json/file.json')
  .then(response => response.json())
  .then(jsonData => console.log(jsonData))
  .catch(error => console.error(error));

const xhr = new XMLHttpRequest();
xhr.open('GET', 'path/to/your/json/file.json');
xhr.responseType = 'json';
xhr.onload = () => console.log(xhr.response);
xhr.onerror = () => console.error(xhr.statusText);
xhr.send();

修改 JSON 数据

读取 JSON 文件之后，我们就可以对其中的数据进行修改了。下面是一些常见的修改操作。

修改属性值

假设我们有一个如下的 JSON 文件：

{
  "name": "Alice",
  "age": 18,
  "isStudent": true,
  "address": {
    "city": "Beijing",
    "street": "Chaoyang Road"
  }
}

我们想要将 name 属性的值修改为 Bob：

jsonData.name = 'Bob';

添加属性

如果需要添加新的属性，可以直接给 JavaScript 对象赋值。例如，我们想要添加一个 email 属性：

jsonData.email = 'bob@example.com';

删除属性

要删除属性，可以使用 delete 关键字。

delete jsonData.isStudent;

修改子属性

假设我们要将 address 的 city 属性修改为 Shanghai：

jsonData.address.city = 'Shanghai';

写入 JSON 文件

修改完 JSON 数据之后，我们需要将修改后的数据写入到 JSON 文件中。同样地，在 Node.js 环境中，我们可以使用 fs 模块来写入文件。

fs.writeFileSync('path/to/your/json/file.json', JSON.stringify(jsonData, null, 2));

上面的代码中，我们使用 fs 模块的 writeFileSync 方法写入文件。第一个参数是文件路径，第二个参数是 JSON 数据。JSON.stringify 方法将 JavaScript 对象转换成 JSON 字符串，并增加了缩进以便阅读。

如果你是在浏览器端，那么你需要将修改后的 JSON 数据发送到后端，让后端负责写入文件。

总结

本文介绍了如何使用 JavaScript 读取外部 JSON 文件并修改其中的数据，最后将修改后的数据写入文件。这些操作对于数据处理和配置文件的修改非常有用。