【JavaScript】axoisでFormDataを使って配列データを送信する

たまにうっかり躓くので備忘録としてまとめ。
JavaScript の axois を使って POST 送信をする際、送信するデータを FormData で管理することがあるかと思います。
サンプルコードは下記のとおりです。

const data = {
  name: '田中太郎',
  age: 30,
};

let formData = new FormData();
Object.keys(data).forEach(key => {
  formData.append(key, data[key]);
});
axios.post('[送信先URL]', formData)
  .then(function (response) {
    // 送信成功時の処理
    console.log(response);
  })
  .catch(function (error) {
    // 送信失敗時の処理
    console.log(error);
  });

で、送るデータが上記のような形式なら何も問題がないのですが、送信するデータに配列が含まれている場合、上記のコードでは動作しません。
そのため、配列データの場合の処理を記述する必要があります。
私はここを頻繁に忘れてエラー発生させてしまうんですよね…！

参考にさせていただいた記事はこちらから。

axoisにFormDataを使ってArrayデータを送信する – Qiita
https://qiita.com/k5690033/items/717f280266dee3e1f741

さて修正方法ですが、上記コードの 7～9行目の処理を下記のように修正します。

Object.keys(data).forEach(key => {
  if (Array.isArray(data[key])) {
    data[key].forEach(value => {
      formData.append(key + '[]', value);
    })
  } else {
    formData.append(key, data[key])
  }
});

2行目で現在のキーのデータが配列かどうかを判定し、配列だったら分割してから formData に代入するようにしています。
何でも、formDataを使うと文字列として値を代入するようなので、こうしないと正しくデータを渡せないとのことでした。

ということで、POST 送信時にエラーが発生して困ったときは、このあたりを確認してみることをおすすめします！
ちなみに私も先程これでエラーになったので、現在修正中です…。

以上、JavaScript の axois で データを POST 送信する際に、FormData を使っているときの注意点でした。
ご参考になれば幸いです。