業務の中で、FormDataで配列を送信したい時の構文を学んだのでメモです。
もし間違いなどあればご指摘お願いします!
FormData
オブジェクトは、HTMLフォームのデータを簡単に扱うためのJavaScript API。フォームのデータをサーバーに送信する際に使う。特に、ファイルアップロードや複数の値を含むフォームデータを扱う際に便利。
配列の要素をFormDataに追加する
通常、フォームの入力項目は単一の値を持つ。しかし、場合によってはフォームに配列形式のデータ(例えば複数の選択肢や複数の関連する値)を送信したい場合があり、これを実現するために、FormDataオブジェクトに配列の要素を追加する必要がある。
基本的な構文
配列の要素を追加する際の基本的な構文は以下。
formData.append('配列の名前[]', 値);
この構文を使って、配列の各要素を追加します。配列の名前の後に [] を付けることが重要。これにより、サーバー側でこれらの値が配列として扱われるようになる。
具体的な例
let formData = new FormData();
formData.append('user[skills][]', 'JavaScript');
formData.append('user[skills][]', 'Python');
formData.append('user[skills][]', 'HTML');
この例では、user[skills][] という名前で3つのスキルを追加しています。サーバーに送信されると、user[skills] は ['JavaScript', 'Python', 'HTML'] という配列として解釈される。