API で受け取ったデータを CSV にしてダウンロードする

日付：2022-3-12更新日：2022-3-12

使ったのは、json2csv !!

は？そんな魔法のようなことがまたまたできるんですか？？と冷静に私の脳内はドン引いていたのですが、できました。
世の中は私の想像をはるかに超えて進んでいるようです…

API からはすでに JSON のデータは取れている状態からのスタート。
なので、まずは JSON データの CSV 化。

使ったのは、json2csv !!

↓これです。
https://www.npmjs.com/package/json2csv

みなさまのブログ情報を頼りにエイヤッとやり始めたのはいいのですが、問題発生。。。

API から取得している JSON ファイルの階層がガタガタ。
ガタガタっていうか、↓こんなイージーな構造ではなかったってことです。

思い描いていた構造の例↓

{
  name: "山田太郎",
  age: 20
},
{
  name: "田中花子",
  age: 18
}

実際はこんな感じ…いやもっと複雑怪奇な気がしましたが（忘れた）、、、

{
  "id": 10000,
  "number": "m-001",
  "personalData": {
      "name": "Jiro",
      "age": 45
  },
  "buyItem": [{
      "shopId": "shop01",
      "itemName": "購入したもの01"
      }
    ]
};

とりえずほしいデータは3つだけなのに、場所がバラバラやないか…みたいな感じです。

でもね「json2csv」にはそういった階層違いのデータもちゃんと取得して CSV にしてくれる機能があります！！
参考【Node.js】JSON文字列をCSVファイルとして吐き出す

ところが、これ React でどーーやって頑張っても、エラーエラーエラーの連続。
まず、transforms: {unwind} が呼び込めない。。

なので、これを使うことは諦めて違うアプローチに切り替え、
いーよいーよ、私が整形すればいいんでしょ！！と半ばキレ気味でガッタガタの元データを必要なところだけ切り取って貼って整形いたしましたっ！！正直、ここで魂が抜けるかと思ったわ。。

JSON の出来ればもう出来たも同然！

嘘です、結構コケてた…

まずは、読み込み。

import { Parser } from 'json2csv';

使うデータの指定と CSV で使うラベルを設定します。

const fields = [{
  label: 'date',
  value: 'date'
},{
  label: 'TotalUsage_GB',
  value: 'totalUsage'
  }];

CSV に変換！！ヘッダーは必要で、区切り文字はなしの設定も追加。そして CSV 化したいデータを指定します。

const json2csvParser = new Parser({ fields, header: true,quote:''});
const csvfile = json2csvParser.parse(formattedData[0]);

これで CSV 化はオッケー！
次にこのデータをダウンロードできるようにします。
これは Blob を使います。（初めて知ったんだけど～

  //Blob
  const blob = new Blob([csvfile], { type: 'text/csv' });
  const fileUrl = window.URL.createObjectURL(blob);

fileUrl でファイルのURLが取れるので、これを html の a タグに指定してあげればオッケーです！

API で受け取ったデータを CSV にしてダウンロードする

目次

使ったのは、json2csv !!

JSON の出来ればもう出来たも同然！