Convertir un objet JS en données de formulaire
Comment puis-je convertir mon objet JS en FormData?
La raison pour laquelle je souhaite procéder est que j’ai construit un objet à partir des ~ 100 valeurs de champ de formulaire.
var item = {
description: 'Some Item',
price : '0.00',
srate : '0.00',
color : 'red',
...
...
}
Maintenant, je suis invité à ajouter la fonctionnalité de fichier de téléchargement à mon formulaire, ce qui est bien sûr impossible via JSON. Je prévois donc de passer à FormData. Alors, y a-t-il un moyen de convertir mon objet JS en FormData?
Si vous avez un objet, vous pouvez facilement créer un objet FormData et ajouter les noms et les valeurs de cet objet à formData.
Vous n'avez posté aucun code, il s'agit donc d'un exemple général.
var form_data = new FormData();
for ( var key in item ) {
form_data.append(key, item[key]);
}
$.ajax({
url : 'http://example.com/upload.php',
data : form_data,
processData : false,
contentType : false,
type: 'POST'
}).done(function(data){
// do stuff
});
Il y a plus d'exemples dans la documentation sur MDN
Avec ES6 et une approche de programmation plus fonctionnelle, la réponse de @ adeneo pourrait ressembler à ceci:
function getFormData(object) {
const formData = new FormData();
Object.keys(object).forEach(key => formData.append(key, object[key]));
return formData;
}
Et alternativement, en utilisant .reduce() et les fonctions de flèche:
getFormData = object => Object.keys(object).reduce((formData, key) => {
formData.append(key, object[key]);
return formData;
}, new FormData());
Cette fonction ajoute toutes les données d'un objet à FormData
Version ES6 de @ developer033:
function buildFormData(formData, data, parentKey) {
if (data && typeof data === 'object' && !(data instanceof Date) && !(data instanceof File)) {
Object.keys(data).forEach(key => {
buildFormData(formData, data[key], parentKey ? `${parentKey}[${key}]` : key);
});
} else {
const value = data == null ? '' : data;
formData.append(parentKey, value);
}
}
function jsonToFormData(data) {
const formData = new FormData();
buildFormData(formData, data);
return formData;
}
const my_data = {
num: 1,
falseBool: false,
trueBool: true,
empty: '',
und: undefined,
nullable: null,
date: new Date(),
name: 'str',
another_object: {
name: 'my_name',
value: 'whatever'
},
array: [
{
key1: {
name: 'key1'
}
}
]
};
jsonToFormData(my_data)
version jQuery:
function appendFormdata(FormData, data, name){
name = name || '';
if (typeof data === 'object'){
$.each(data, function(index, value){
if (name == ''){
appendFormdata(FormData, value, index);
} else {
appendFormdata(FormData, value, name + '['+index+']');
}
})
} else {
FormData.append(name, data);
}
}
var formData = new FormData(),
your_object = {
name: 'test object',
another_object: {
name: 'and other objects',
value: 'whatever'
}
};
appendFormdata(formData, your_object);
Les autres réponses étaient incomplètes pour moi. J'ai commencé à répondre @ Vladimir Novopachine et l'ai modifié. Voici les choses dont j'avais besoin et le bug que j'ai trouvé:
- Support pour le fichier
- Prise en charge du tableau
- Bug: Le fichier à l'intérieur d'un objet complexe doit être ajouté avec
.propau lieu de[prop]. Par exemple,formData.append('photos[0][file]', file)ne fonctionnait pas sur Google Chrome, tandis queformData.append('photos[0].file', file)fonctionnait. - Ignorer certaines propriétés dans mon objet
Le code suivant devrait fonctionner sur les navigateurs IE11 et Evergreen.
function objectToFormData(obj, rootName, ignoreList) {
var formData = new FormData();
function appendFormData(data, root) {
if (!ignore(root)) {
root = root || '';
if (data instanceof File) {
formData.append(root, data);
} else if (Array.isArray(data)) {
for (var i = 0; i < data.length; i++) {
appendFormData(data[i], root + '[' + i + ']');
}
} else if (typeof data === 'object' && data) {
for (var key in data) {
if (data.hasOwnProperty(key)) {
if (root === '') {
appendFormData(data[key], key);
} else {
appendFormData(data[key], root + '.' + key);
}
}
}
} else {
if (data !== null && typeof data !== 'undefined') {
formData.append(root, data);
}
}
}
}
function ignore(root){
return Array.isArray(ignoreList)
&& ignoreList.some(function(x) { return x === root; });
}
appendFormData(obj, rootName);
return formData;
}
J'avais un scénario dans lequel les fichiers JSON imbriqués devaient être sérialisés de manière linéaire lors de la construction des données de formulaire, car c'est ainsi que le serveur attend des valeurs. Donc, j'ai écrit une petite fonction récursive qui traduit le JSON qui ressemble à ceci:
{
"orderPrice":"11",
"cardNumber":"************1234",
"id":"8796191359018",
"accountHolderName":"Raj Pawan",
"expiryMonth":"02",
"expiryYear":"2019",
"issueNumber":null,
"billingAddress":{
"city":"Wonderland",
"code":"8796682911767",
"firstname":"Raj Pawan",
"lastname":"Gumdal",
"line1":"Addr Line 1",
"line2":null,
"state":"US-AS",
"region":{
"isocode":"US-AS"
},
"Zip":"76767-6776"
}
}
Dans quelque chose comme ça:
{
"orderPrice":"11",
"cardNumber":"************1234",
"id":"8796191359018",
"accountHolderName":"Raj Pawan",
"expiryMonth":"02",
"expiryYear":"2019",
"issueNumber":null,
"billingAddress.city":"Wonderland",
"billingAddress.code":"8796682911767",
"billingAddress.firstname":"Raj Pawan",
"billingAddress.lastname":"Gumdal",
"billingAddress.line1":"Addr Line 1",
"billingAddress.line2":null,
"billingAddress.state":"US-AS",
"billingAddress.region.isocode":"US-AS",
"billingAddress.Zip":"76767-6776"
}
Le serveur accepterait les données de formulaire qui se trouvent dans ce format converti.
Voici la fonction:
function jsonToFormData (inJSON, inTestJSON, inFormData, parentKey) {
// http://stackoverflow.com/a/22783314/260665
// Raj: Converts any nested JSON to formData.
var form_data = inFormData || new FormData();
var testJSON = inTestJSON || {};
for ( var key in inJSON ) {
// 1. If it is a recursion, then key has to be constructed like "parent.child" where parent JSON contains a child JSON
// 2. Perform append data only if the value for key is not a JSON, recurse otherwise!
var constructedKey = key;
if (parentKey) {
constructedKey = parentKey + "." + key;
}
var value = inJSON[key];
if (value && value.constructor === {}.constructor) {
// This is a JSON, we now need to recurse!
jsonToFormData (value, testJSON, form_data, constructedKey);
} else {
form_data.append(constructedKey, inJSON[key]);
testJSON[constructedKey] = inJSON[key];
}
}
return form_data;
}
Invocation:
var testJSON = {};
var form_data = jsonToFormData (jsonForPost, testJSON);
J'utilise testJSON uniquement pour voir les résultats convertis, car je ne pourrais pas extraire le contenu de form_data. AJAX après appel:
$.ajax({
type: "POST",
url: somePostURL,
data: form_data,
processData : false,
contentType : false,
success: function (data) {
},
error: function (e) {
}
});
Essayez la fonction JSON.stringify comme ci-dessous
var postData = JSON.stringify(item);
var formData = new FormData();
formData.append("postData",postData );
Désolé pour une réponse tardive, mais je me débattais avec ceci car Angular 2 ne prend actuellement pas en charge le téléchargement de fichier. Ainsi, le moyen de le faire était d'envoyer un XMLHttpRequest avec FormData. Donc, j'ai créé une fonction pour le faire. J'utilise TypeScript. Pour le convertir en Javascript il suffit de supprimer la déclaration des types de données.
/**
* Transforms the json data into form data.
*
* Example:
*
* Input:
*
* fd = new FormData();
* dob = {
* name: 'phone',
* photos: ['myphoto.jpg', 'myotherphoto.png'],
* price: '615.99',
* color: {
* front: 'red',
* back: 'blue'
* },
* buttons: ['power', 'volup', 'voldown'],
* cameras: [{
* name: 'front',
* res: '5Mpx'
* },{
* name: 'back',
* res: '10Mpx'
* }]
* };
* Say we want to replace 'myotherphoto.png'. We'll have this 'fob'.
* fob = {
* photos: [null, <File object>]
* };
* Say we want to wrap the object (Rails way):
* p = 'product';
*
* Output:
*
* 'fd' object updated. Now it will have these key-values "<key>, <value>":
*
* product[name], phone
* product[photos][], myphoto.jpg
* product[photos][], <File object>
* product[color][front], red
* product[color][back], blue
* product[buttons][], power
* product[buttons][], volup
* product[buttons][], voldown
* product[cameras][][name], front
* product[cameras][][res], 5Mpx
* product[cameras][][name], back
* product[cameras][][res], 10Mpx
*
* @param {FormData} fd FormData object where items will be appended to.
* @param {Object} dob Data object where items will be read from.
* @param {Object = null} fob File object where items will override dob's.
* @param {string = ''} p Prefix. Useful for wrapping objects and necessary for internal use (as this is a recursive method).
*/
append(fd: FormData, dob: Object, fob: Object = null, p: string = ''){
let apnd = this.append;
function isObj(dob, fob, p){
if(typeof dob == "object"){
if(!!dob && dob.constructor === Array){
p += '[]';
for(let i = 0; i < dob.length; i++){
let aux_fob = !!fob ? fob[i] : fob;
isObj(dob[i], aux_fob, p);
}
} else {
apnd(fd, dob, fob, p);
}
} else {
let value = !!fob ? fob : dob;
fd.append(p, value);
}
}
for(let prop in dob){
let aux_p = p == '' ? prop : `${p}[${prop}]`;
let aux_fob = !!fob ? fob[prop] : fob;
isObj(dob[prop], aux_fob, aux_p);
}
}
Version TypeScript:
static convertModelToFormData(model: any, form: FormData = null, namespace = ''): FormData {
let formData = form || new FormData();
for (let propertyName in model) {
if (!model.hasOwnProperty(propertyName) || model[propertyName] == undefined) continue;
let formKey = namespace ? `${namespace}[${propertyName}]` : propertyName;
if (model[propertyName] instanceof Date) {
formData.append(formKey, this.dateTimeToString(model[propertyName]));
}
else if (model[propertyName] instanceof Array) {
model[propertyName].forEach((element, index) => {
if (typeof element != 'object')
formData.append(`${formKey}[]`, element);
else {
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;
}
https://Gist.github.com/Mds92/091828ea857cc556db2ca0f991fee9f6
Dans mon cas, mon objet avait aussi une propriété qui était un tableau de fichiers. Comme ils sont binaires, ils devraient être traités différemment - index n'a pas besoin de faire partie de la clé. J'ai donc modifié les réponses de @Vladimir Novopashin et @ developer33:
export function convertToFormData(data, formData, parentKey) {
if(data === null || data === undefined) return null;
formData = formData || new FormData();
if (typeof data === 'object' && !(data instanceof Date) && !(data instanceof File)) {
Object.keys(data).forEach(key =>
convertToFormData(data[key], formData, (!parentKey ? key : (data[key] instanceof File ? parentKey : `${parentKey}[${key}]`)))
);
} else {
formData.append(parentKey, data);
}
return formData;
}
Cette méthode convertit un objet JS en FormData:
function convertToFormData(params) {
return Object.entries(params)
.reduce((acc, [key, value]) => {
if (Array.isArray(value)) {
value.forEach((v, k) => acc.append(`${key}[${k}]`, value));
} else if (typeof value === 'object' && !(value instanceof File) && !(value instanceof Date)) {
Object.entries(value).forEach((v, k) => acc.append(`${key}[${k}]`, value));
} else {
acc.append(key, value);
}
return acc;
}, new FormData());
}