[JavaScript]サーバ上のCSVをJsonにして使用

この記事は約3分で読めます。
スポンサーリンク

やりたいこと

サーバ上のCSVファイルをクライアントサイドでJsonにして使用します。

使用するライブラリはnode-csvtojsonです。Nodejsがインストールされていること前提です。

GitHub - Keyang/node-csvtojson: Blazing fast and Comprehensive CSV Parser for Node.JS / Browser / Command Line.
Blazing fast and Comprehensive CSV Parser for Node.JS / Browser / Command Line. - GitHub - Keyang/node-csvtojson: Blazing fast and Comprehensive CSV Parser for...
github.com

クライアントにすべてのデータをダウンロードするので、ユーザ情報などの機密データやデータが大きい場合は別の方法を検討してください。

スポンサーリンク

準備

プロジェクトのルートで以下のコマンドを実行してcsvtojson をインストールします。

npm i csvtojson
スポンサーリンク

実装

実装は以下の通りです。

import csv from "csvtojson"

const convertCsv2Json = (txt) => {
  csv().fromString(txt).then(
    csv_data => {
      console.log(csv_data);
    }
  )
}

const fetchSetting = async (url) => {
  fetch(url).then(res => res.text().then(txt => convertCsv2Json(txt)));
}

fetchSetting("/setting.csv")

fetchSetting でcsvファイルをダウンロードしてconvertCsv2Jsonを呼んでいます。（引数の/setting.csvはcsvファイルのURLですので必要に応じて変更してください。）

convertCsv2JsonではダウンロードしたCSV をJsonにコンバートしています。

Jsonに変換されたものは以下の関数の中でcsv_data として使用可能です。

    csv_data => {
      console.log(csv_data);
    }

日本語は文字化けをする可能性があります。CSVファイルはUTF8で保存してください。

実行例

入力のCSVと出力のJsonの例を示します。

１行目はタイトルとして扱われます。

/setting.csv

Name,Age,Country
Taro,25,Japan
Tom,21,USA

csv_data

ほかの出力方法

csv()に引数を渡すことで出力を変更することができます。

csv({ noheader: true, output: “csv” })

この設定だと１行目もデータとして扱われ、データは配列として保存されます。

/setting.csv

Name,Age,Country
Taro,25,Japan
Tom,21,USA

csv_data

csv({ output: “line” })

この設定だとデータは一つの文字列として保存されます。

/setting.csv

Name,Age,Country
Taro,25,Japan
Tom,21,USA

csv_data

コメント

タイトルとURLをコピーしました