如何在Angular中读取和写入JSON文件？

一、读取JSON文件并映射到User数组 #

你已经用HttpClient发起了get请求，只需要在订阅回调里把响应结果直接赋值给userList，同时给get方法指定类型为User[]，让TypeScript自动完成类型映射：

// 服务中的读取方法
readUsers(): void {
  this.http.get<User[]>('../assets/users.json').subscribe(res => {
    this.userList = res;
    console.log('读取成功', this.userList);
  });
}

调用这个方法就能把JSON里的用户数据存入userList数组。

二、修改数组示例 #

比如添加新用户或修改现有用户：

// 添加新用户
addNewUser(): void {
  const newUser: User = { id: 2, name: 'Alice' };
  this.userList.push(newUser);
}

// 修改现有用户
updateUser(): void {
  const targetUser = this.userList.find(u => u.id === 1);
  if (targetUser) {
    targetUser.name = 'John Doe';
  }
}

三、写入JSON文件的关键说明 #

前端无法直接修改本地静态资源文件（比如assets下的users.json），浏览器的安全策略限制了前端对本地文件系统的写入权限，打包后的静态文件部署在服务器上，前端仅能读取。

要实现写入，必须通过后端接口完成：

1. 后端提供PUT接口，接收前端发送的修改后用户数组
2. 后端用文件系统API（如Node.js的fs模块）将数据写入users.json文件

后端示例（Node.js + Express） #

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();
app.use(express.json());

// 处理PUT请求，写入用户数据
app.put('/api/users', (req, res) => {
  const users = req.body;
  const filePath = path.join(__dirname, 'assets', 'users.json'); // 对应你的JSON文件路径
  fs.writeFile(filePath, JSON.stringify(users, null, 2), (err) => {
    if (err) {
      console.error(err);
      return res.status(500).send('写入失败');
    }
    res.status(200).send('写入成功');
  });
});

app.listen(3000, () => console.log('后端服务运行在3000端口'));

前端调用写入接口的代码 #

修改PUT请求，把修改后的userList作为请求体发送给后端：

// 服务中的写入方法
saveUsers(): void {
  this.http.put('/api/users', this.userList).subscribe(res => {
    console.log('写入成功', res);
  }, err => {
    console.error('写入失败', err);
  });
}

额外说明 #

如果是Electron这类桌面应用，前端可直接通过Node.js的fs模块读写本地文件，但常规Web应用必须依赖后端完成写入操作。

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