appending array to FormData and send via AJAX appending array to FormData and send via AJAX arrays arrays

appending array to FormData and send via AJAX


You can also send an array via FormData this way:

var formData = new FormData;var arr = ['this', 'is', 'an', 'array'];for (var i = 0; i < arr.length; i++) {    formData.append('arr[]', arr[i]);}

So you can write arr[] the same way as you do it with a simple HTML form. In case of PHP it should work.

You may find this article useful: How to pass an array within a query string?


You have several options:

Convert it to a JSON string, then parse it in PHP (recommended)

JS

var json_arr = JSON.stringify(arr);

PHP

$arr = json_decode($_POST['arr']);

Or use @Curios's method

Sending an array via FormData.


Not recommended: Serialize the data with, then deserialize in PHP

JS

// Use <#> or any other delimiter you wantvar serial_arr = arr.join("<#>"); 

PHP

$arr = explode("<#>", $_POST['arr']);


Typescript version:

export class Utility {          public static convertModelToFormData(model: any, form: FormData = null, namespace = ''): FormData {        let formData = form || new FormData();        let formKey;        for (let propertyName in model) {            if (!model.hasOwnProperty(propertyName) || !model[propertyName]) continue;            let formKey = namespace ? `${namespace}[${propertyName}]` : propertyName;            if (model[propertyName] instanceof Date)                formData.append(formKey, model[propertyName].toISOString());            else if (model[propertyName] instanceof Array) {                model[propertyName].forEach((element, index) => {                    const tempFormKey = `${formKey}[${index}]`;                    this.convertModelToFormData(element, formData, tempFormKey);                });            }            else if (typeof model[propertyName] === 'object' && !(model[propertyName] instanceof File))                this.convertModelToFormData(model[propertyName], formData, formKey);            else                formData.append(formKey, model[propertyName].toString());        }        return formData;    }}

Using:

let formData = Utility.convertModelToFormData(model);