在 Gatsbyjs 中将 csv 文件转换为 json

Question

我正在使用 GatsbyJs，我正在考虑使用 gatsby-transformer-csv 插件，文档 here。我有两个从 WordPress 导出的 csv，我想将它们与 Gatsby 一起使用。我可以让一个人开始工作，然后再弄清楚另一个。对于这两个 csv 文件，有相应的匹配 ID，因为某些内容是 IE；标题和内容在一个 csv 中，图像在另一个 csv 中。我已经安装了转换器插件，但我不确定将我的 csv 文件放在哪里以及如何将其转换为 json，然后一旦转换为 Json 如何将其输出为反应组件在特定页面上。

我只看到一个如何查询部分，这对我来说意义不大，但看起来像这样

  allLettersCsv {
    edges {
      node {
        letter
        value
      }
    }
  }
}

Answer 1

您通常希望将此插件与 gatsby-source-filesystem 插件一起使用。

gatsby-source-filesystem 读取您的 .csv 文件，然后 gatsby-transformer-csv 将 .csv 内容转换 为数据您可以使用 graphQL 进行查询。

因此，如果您将 .csv 文件放入 ./src/data，您的 gatsby 配置应如下所示：

// In your gatsby-config.js
module.exports = {
  plugins: [ 
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/src/data/`,
      },
    },
    `gatsby-transformer-csv`,
  ],
}

然后您可以使用 graphQL 查询将您的数据放入组件的属性中。

您可以在 https://github.com/gatsbyjs/gatsby/tree/master/examples/using-csv

查看示例项目

在 Gatsbyjs 中将 csv 文件转换为 json

Converting a csv file to json in Gatsbyjs

javascript

csv

json

gatsby