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);