Angular项目中如何访问已上传JSON文件的数据？

嘿，你已经成功拿到上传的File对象了，离拿到JSON数据只差一步！咱们用浏览器原生的FileReader来读取文件内容，再解析成JSON对象就能轻松访问里面的数据了，具体代码和步骤如下：

完整实现代码 #

startUpload(event: FileList) {
  const file = event.item(0);
  
  // 先校验下是不是JSON文件，避免后续出错
  if (file && file.type === 'application/json') {
    const reader = new FileReader();
    
    // 文件读取完成后的回调
    reader.onload = (e) => {
      // 把读取到的文本内容解析成JSON对象
      const jsonData = JSON.parse(e.target?.result as string);
      
      // 现在就可以自由访问JSON里的数据啦！
      console.log('解析后的完整数据:', jsonData);
      // 举个例子：如果你的JSON里有个`turnaround`数组，就这么访问
      // console.log('Turnaround列表:', jsonData.turnaround);
    };
    
    // 以文本形式读取文件内容
    reader.readAsText(file);
  } else {
    console.error('请上传有效的JSON格式文件哦');
  }
}

关键步骤说明 #

• 创建FileReader实例：这是浏览器提供的API，专门用来读取本地文件的内容
• 监听onload事件：文件读取是异步操作，所以要在这个回调里处理读取完成后的内容
• 解析JSON：用JSON.parse()把读取到的文本转换成可操作的JSON对象，之后你就可以像访问普通JS对象一样，用.或者[]来获取里面的字段了
• 类型校验：加个file.type === 'application/json'的判断，能提前过滤非JSON文件，避免解析报错

小提示 #

如果你的JSON结构比较复杂，还可以给解析后的对象定义TypeScript接口，这样能获得类型提示，写代码更顺畅：

// 定义一个和你的JSON结构匹配的接口
interface TurnaroundData {
  name: string;
  items: Array<{id: number; content: string}>;
  // 其他字段...
}

// 解析的时候指定类型
const jsonData = JSON.parse(e.target?.result as string) as TurnaroundData;

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