HTML5 फॉर्मडेटा को JSON में कनवर्ट करना

HTML5 फॉर्मडेटा ऑब्जेक्ट की प्रविष्टियों को JSON में कनवर्ट करना वेब विकास में एक सामान्य कार्य है। हालाँकि इसे प्राप्त करने के लिए विभिन्न दृष्टिकोण हैं, सबसे सीधा और कुशल तरीका सीधे फॉर्मडाटा ऑब्जेक्ट पर forEach() फ़ंक्शन का उपयोग करना है।

var object = {};
formData.forEach(function(value, key){
    object[key] = value;
});
var json = JSON.stringify(object);

यह दृष्टिकोण फॉर्मडाटा ऑब्जेक्ट में प्रत्येक कुंजी-मूल्य जोड़ी के माध्यम से पुनरावृत्त होता है और उन्हें एक नई जावास्क्रिप्ट ऑब्जेक्ट में जोड़ता है। ऑब्जेक्ट को JSON स्ट्रिंग में बदलने के लिए JSON.stringify() विधि का उपयोग किया जाता है।

अपडेट: ES6 एरो फ़ंक्शंस

उन लोगों के लिए जो ES6 सिंटैक्स पसंद करते हैं, तीर फ़ंक्शन का उपयोग करके समान समाधान लिखा जा सकता है:

var object = {};
formData.forEach((value, key) => object[key] = value);
var json = JSON.stringify(object);

अपडेट 2: मल्टी वैल्यू फॉर्म एलिमेंट्स के लिए समर्थन

मल्टी-सेलेक्ट जैसे मल्टीपल वैल्यू वाले फॉर्म एलिमेंट्स को सपोर्ट करना सूचियाँ, निम्नलिखित कोड का उपयोग किया जा सकता है:

var object = {};
formData.forEach((value, key) => {
    if(!Reflect.has(object, key)){
        object[key] = value;
        return;
    }
    if(!Array.isArray(object[key])){
        object[key] = [object[key]];    
    }
    object[key].push(value);
});
var json = JSON.stringify(object);

var request = new XMLHttpRequest(); request.open('POST', 'http://example.com/submitform.php'); request.send(formData);

fetch('http://example.com/submitform.php', { विधि: 'पोस्ट', बॉडी: फॉर्मडेटा }).तब((प्रतिक्रिया) => { // यहां प्रतिक्रिया के साथ कुछ करें... });

var request = new XMLHttpRequest();
request.open('POST', 'http://example.com/submitform.php');
request.send(formData);

fetch('http://example.com/submitform.php', {
  method: 'POST',
  body: formData
}).then((response) => { 
  // do something with response here... 
});