FormDataでオブジェクトの階層があるデータを送る

概要

multipart/form-data形式で、JavaScriptからPostを投げる場合、FormDataを使うケースがあると思います。例えば、RailsのStrong Parametersに対応（Strong Parametersについては【Rails】requireとpermitメソッド参照）するなど、FormDataをオブジェクトの階層形式で送る場合の対応方法について記載します。
なお、FormDataの使い方についてはFormData は multipart/form-data で application/x-www-form-urlencoded は URLSearchParamsにてまとめられています。

サンプルデータ

Json形式で下記の通り表現すると、parantObjectの配下にparamが存在するケースになります。

sample.json

{
  "parantObject" : {
    "name1": "value1"
  }
}

対応方法

以下の通り、FormDataに入れる変数名を親オブジェクト名[子の変数名]の形式で、登録することで親子関係の認識をします。

sample.js

form.append("parantObject[name1]", "value1");

その他参考

• 配列を送信したい場合、axoisにFormDataを使ってArrayデータを送信するが参考になります。ちなみにオブジェクト配下の配列項目を送りたいときは、親オブジェクト名[子の配列変数名][]で送信します。
• axiosでFileオブジェクトを含むデータをFormDataに変換する共通処理で、オブジェクトをFormDataに変換するロジックが紹介されています。