如何在ReactJS中将GitHub原始文件数据转换为JSON格式

问题排查 #

你当前的代码存在两处核心错误：

• fetch方法返回的Response对象本身没有content属性，必须先调用res.json()解析GitHub接口的结构化返回结果
• GitHub Contents API返回的文件内容是Base64编码格式，且你获取的是CSV文件，还需要额外做CSV转JSON的处理

完整实现代码 #

首先安装CSV解析依赖：
npm install papaparse

业务代码如下：

import Papa from 'papaparse'

fetch("https://api.github.com/repos/graphql-compose/graphql-compose-examples/contents/examples/northwind/data/csv/employees.csv")
  .then((res) => {
    if (res.ok) {
      // 解析GitHub接口返回的结构化数据
      return res.json()
    }
    throw new Error("请求失败")
  })
  .then((githubData) => {
    // 解码Base64格式的文件内容，先去除返回自带的换行符避免解码报错
    const rawCsv = atob(githubData.content.replace(/\n/g, ''))
    // CSV转JSON，header参数设为true会将CSV第一行作为JSON的键名
    const jsonData = Papa.parse(rawCsv, { header: true }).data
    console.log('转换完成的JSON数据：', jsonData)
  })
  .catch((error) => console.log(error))

优化建议 #

如果你不需要获取文件的元数据（比如更新时间、SHA值等），可以直接请求文件的raw地址，省去Base64解码的步骤：

import Papa from 'papaparse'

fetch("https://raw.githubusercontent.com/graphql-compose/graphql-compose-examples/master/examples/northwind/data/csv/employees.csv")
  .then((res) => {
    if (res.ok) return res.text()
    throw new Error("请求失败")
  })
  .then((rawCsv) => {
    const jsonData = Papa.parse(rawCsv, { header: true }).data
    console.log(jsonData)
  })
  .catch((error) => console.log(error))

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