js如何读取json并修改

在JavaScript中，读取和修改JSON数据是常见的需求，本文将详细介绍如何使用JavaScript读取JSON文件，并对数据进行修改,让我们一起来看看具体的操作步骤吧！

我们需要创建一个JSON文件，创建一个名为data.json的文件,内容如下：

{
  "name": "张三",
  "age": 25,
  "gender": "男",
  "hobbies": ["篮球", "足球", "游泳"]
}

我们将使用JavaScript读取这个JSON文件，这里主要有两种方法：使用XMLHttpRequest对象和使用fetch API。

使用XMLHttpRequest对象

创建一个XMLHttpRequest对象。

JavaScript

var xhr = new XMLHttpRequest();

配置请求信息,并发送请求。

JavaScript

xhr.open('GET', 'data.json', true);
xhr.send();

监听请求状态,并在请求成功时处理数据。

JavaScript

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 读取JSON数据
    var jsonData = JSON.parse(xhr.responseText);
    // 修改数据
    jsonData.age = 30;
    // 打印修改后的数据
    console.log(jsonData);
  }
};

使用fetch API

使用fetch函数发送请求。

JavaScript

fetch('data.json')
  .then(response => {
    // 检查响应状态
    if (response.ok) {
      return response.json();
    }
    throw new Error('Network response was not ok.');
  })
  .then(jsonData => {
    // 修改数据
    jsonData.age = 30;
    // 打印修改后的数据
    console.log(jsonData);
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

js如何读取json并修改

在上述两种方法中，我们成功读取了JSON文件，并对数据进行了修改,下面我们来详细解析一下修改过程。

修改JSON数据

在读取JSON数据后，我们可以像操作普通对象一样修改数据，在上面的例子中，我们将age属性的值从25修改为30。

JavaScript

jsonData.age = 30;

我们还可以修改数组类型的数据，将hobbies数组中的某个元素替换为另一个值。

JavaScript

jsonData.hobbies[1] = "羽毛球";

或者,向数组中添加一个新的元素：

JavaScript

jsonData.hobbies.push("跑步");

实际应用场景

js如何读取json并修改

在实际开发中，我们可能需要根据用户的操作或其他条件动态修改JSON数据,以下是一个简单的示例：

假设我们有一个用户列表的JSON数据,如下：

[
  {"id": 1, "name": "张三", "age": 25},
  {"id": 2, "name": "李四", "age": 28}
]

当用户点击某个按钮时,我们希望根据用户ID修改该用户的年龄。

JavaScript

// 假设我们已经有了一个获取用户列表的函数getUserList()
var userList = getUserList();
// 用户点击按钮后，根据ID修改年龄
function updateUserAge(userId, newAge) {
  for (var i = 0; i < userList.length; i++) {
    if (userList[i].id === userId) {
      userList[i].age = newAge;
      break;
    }
  }
}
// 调用函数，将ID为1的用户年龄修改为30
updateUserAge(1, 30);