[javascript入門] JSONデータをCSVデータに変換する方法まとめ

今回はjsonオブジェクトをcsvデータに変換する方法の備忘録となります。

下記2パターンをご紹介します。 Json → CSV変換方法

1. mapを利用した変換
2. json2csv(npm)を利用

mapを利用した変換

jsonオブジェクトに対して、mapメソッドを利用して値を「カンマ(,)」区切りで結合していきます。

let jsonObj = [
  {name: 'kunisura1', age: 35, isAvailable: true},
  {name: 'kunisura2', age: 23, isAvailable: false},
  {name: 'kunisura3', age: 30, isAvailable: true}
];

function jsonToCsv(items) {
  // headerを取得
  const header = Object.keys(items[0]);
  const headerString = header.join(',');

  const replacer = (key, value) => value ?? '';
  const rowItems = items.map((row) =>
    header.map((fieldName) => JSON.stringify(row[fieldName], replacer)).join(',')
  );

  // headerとコンテンツ部分を結合する
  const csv = [headerString, ...rowItems].join('\r\n');

  return csv;
}
const csv = jsonToCsv(jsonObj);
console.log(csv);

上記を実行すると下記のようなCSVデータを出力できます。

name,age,isAvailable
"kunisura1",35,true
"kunisura2",23,false
"kunisura3",30,true

json2csv(npm)を利用

npm にてjson2csvをインストールして、jsonデータを簡単にcsvに出力することができます。

$ npm install json2csv

htmlなど、フロント側で使う場合は、CDNも用意されています。

<script src="https://cdn.jsdelivr.net/npm/json2csv"></script>

json2csvを利用する場合は、ヘッダー情報を一度定義してあげる必要があります。

const { Parser } = require('json2csv'); 

let jsonObj = [
  {name: 'kunisura1', age: 35, isAvailable: true},
  {name: 'kunisura2', age: 23, isAvailable: false},
  {name: 'kunisura3', age: 30, isAvailable: true}
];

const fields = Object.keys(jsonObj[0]);
const json2csvParser = new Parser({ fields, header: true , withBOM: true});
const csv2 = json2csvParser.parse(jsonObj);
console.log(csv2);

出力結果は、下記の通りです。

"name","age","isAvailable"
"kunisura1",35,true
"kunisura2",23,false
"kunisura3",30,true

独自で作った場合と、json2csvを使った場合でヘッダーの出力が違いますね。

json2csvを使った場合は、ヘッダー文字列にダブルクォーテーション(“)で囲まれています。

json2csv

最後に

CSVを処理するライブラリは多くありますが、自分にあった方法で処理すると良いかと思います。

取り出したデータを変換して出力させたい場合などは、独自で関数を作るのが良いですね。