फॉर्मडाटा का निरीक्षण कैसे करें?

Question

मैं कोशिश कर रहा हूँ console.logऔर इसके माध्यम से पाशन for in।

यहाँ यह FormData पर MDN संदर्भ है।

दोनों प्रयास इस फिड में हैं ।

var fd = new FormData(),
    key;

// poulate with dummy data
fd.append("key1", "alskdjflasj");
fd.append("key2", "alskdjflasj");

// does not do anything useful
console.log(fd);

// does not do anything useful   
for(key in fd) {
    console.log(key);
}

मैं यह देखने के लिए प्रपत्र डेटा का निरीक्षण कैसे कर सकता हूं कि क्या कुंजी निर्धारित की गई है।

Comments

यह एक फ़ायरफ़ॉक्स केवल सुविधा नहीं है?

— शिप्लू मोकादिम

caniuse.com/#search=FormData

आप key of fdइसके बजाय करना चाहते हैं key in fd। मुझे नहीं पता कि यह तकनीकी रूप से अभी तक क्यों है, लेकिन यह काम करता है। यहाँ प्रलेखन ।

— cilphex

तो, आपके जावास्क्रिप्ट में किसी भी कोड को जोड़े बिना फॉर्म डेटा दिखाने के लिए कोई क्रोम या फ़ायरफ़ॉक्स प्लगइन नहीं है?

— natel

Answer 1

अपडेट की गई विधि:

मार्च 2016 तक, क्रोम और फ़ायरफ़ॉक्स के हाल के संस्करण अब FormData.entries()फॉर्मडाटा का निरीक्षण करने के लिए समर्थन करते हैं । स्रोत ।

// Create a test FormData object
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// Display the key/value pairs
for (var pair of formData.entries()) {
    console.log(pair[0]+ ', ' + pair[1]); 
}

भूत इको और rloth के लिए धन्यवादयह इंगित !

पुराना उत्तर:

इन मोज़िला लेखों को देखने के बाद , ऐसा लगता है कि डेटा को फॉर्मडाटा ऑब्जेक्ट से बाहर निकालने का कोई तरीका नहीं है। आप केवल AJAX अनुरोध के माध्यम से भेजने के लिए फॉर्मडाटा के निर्माण के लिए उनका उपयोग कर सकते हैं।

मुझे यह भी बस यह सवाल मिला कि यह एक ही बात बताता है: फॉर्मडैट.एपेंड ("कुंजी", "मूल्य") काम नहीं कर रहा है ।

इसका एक तरीका नियमित शब्दकोश का निर्माण करना होगा और फिर इसे फॉर्मडाटा में बदलना होगा:

var myFormData = {
    key1: 300,
    key2: 'hello world'
};

var fd = new FormData();
for (var key in myFormData) {
    console.log(key, myFormData[key]);
    fd.append(key, myFormData[key]);
}

यदि आप एक सादे फॉर्मडटा ऑब्जेक्ट को डीबग करना चाहते हैं, तो आप इसे नेटवर्क अनुरोध कंसोल में जांचने के लिए भी भेज सकते हैं:

var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(fd);

Comments

खैर, यह एक अच्छा विचार होगा, मैं फॉर्मडाटा को एक सहायक विधि में लपेटूंगा और फिर वस्तु शाब्दिक रूप से पास करूंगा। बाद में आप इसे देखना चाहते हैं तो इसे बचाएं।

क्रोम और फ़ायरफ़ॉक्स के हाल के संस्करण अब एक myFormData.entries()

— पुनरावृत्ति

लेखन के समय, फॉर्मडाटा तक पहुंचने का कोई रास्ता नहीं था। मैंने अब नए एपीआई को प्रतिबिंबित करने के लिए उत्तर अपडेट कर दिया है। Rloth सिर के लिए धन्यवाद!

— रयान एंडाकॉट

मुझे लगता है कि यह भी ध्यान रखें कि आपके द्वारा उपयोग किए एक मौजूदा फ़ॉर्म का डेटा प्राप्त कर सकते हैं उपयोगी होता है: var formData = new FormData(formElement)। यदि आप JQuery का उपयोग कर रहे हैं, तो आप ऐसा कर सकते हैं var formData = new FormData($('#formElementID')[0]):। फिर आवश्यकतानुसार डेटा संलग्न करें।

— पीटर वाल्डेज़

FormDataIE / एज में पुनरावृत्ति के लिए : stackoverflow.com/questions/37938955/…

— cs_pupil

Answer 2

संक्षिप्त जवाब

console.log(...fd)

लंबा जवाब

यदि आप निरीक्षण करना चाहते हैं कि कच्चा शरीर कैसा दिखेगा तो आप रिस्पांस कंस्ट्रक्टर (भ्रूण एपीआई का हिस्सा) का उपयोग कर सकते हैं

var fd = new FormData

fd.append("key1", "value1")
fd.append("key2", "value2")

new Response(fd).text().then(console.log)

कुछ इच्छाएं प्रत्येक प्रविष्टि को लॉग करने का सुझाव देती हैं, लेकिन console.logकई तर्क भी ले सकती
console.log(foo, bar)
हैं किसी भी तर्क को लेने के लिए आप applyविधि का उपयोग कर सकते हैं और इसे इस तरह से कॉल कर सकते हैं console.log.apply(console, array):।
लेकिन प्रसार ऑपरेटर और पुनरावृत्त के साथ तर्क को लागू करने के लिए एक नया ES6 तरीका है
console.log(...array)।

यह जानकर, और तथ्य यह है कि फॉर्मडाटा और दोनों सरणी Symbol.iteratorमें इसका एक तरीका है प्रोटोटाइप आप बस इस पर लूप के बिना कर सकते हैं, या .entries()इट्रेटर की पकड़ पाने के लिए कॉल कर सकते हैं।

var fd = new FormData

fd.append("key1", "value1")
fd.append("key2", "value2")

console.log(...fd)

Comments

प्रसार ऑपरेटर !! उत्कृष्ट और वास्तव में सरल, फॉर्मडैट को प्यूसिडो जोंस प्रारूप के रूप में प्रदर्शित करता है। धन्यवाद - न्यू रिस्पॉन्स के लिए, मुझे बस [[प्रॉमिसस्टैटस]]: "पेंडिंग"

— प्लैटिनम

या वेब कंसोल से सिर्फ लिखो[...fd]

— अंतहीन

नरक घंटियाँ - आप इसे फिर से किया था @ बिना वह कौन सी विधि है जिसे कोष्ठक का उपयोग करना कहा जाता है?

— प्लैटिनम

ठीक है, कोष्ठक सिर्फ एक सरणी है और आप एक नया निर्माण कर रहे हैं। आप ...सभी आइटम्स के साथ नया एरे बनाने के लिए फॉर्मडेटा से प्रविष्टियों को फैला रहे हैं , फिर कंसोल ने आपके द्वारा लिखी अंतिम पंक्ति से परिणाम को डंप कर दिया

— अंतहीन

सबसे अच्छा जवाब यहाँ - सभी gumpf को हटा देना चाहिए और सिर्फ 2 कोड स्निपेट छोड़ देना चाहिए - बहुत धन्यवाद

— danday74

Answer 3

मैंने उपयोग किया formData.entries() विधि का । मुझे सभी ब्राउज़र समर्थन के बारे में निश्चित नहीं है, लेकिन यह फ़ायरफ़ॉक्स पर ठीक काम करता है।

Https://developer.mozilla.org/en-US/docs/Web/API/FormData/entries से लिया गया

// Create a test FormData object
var formData = new FormData();
formData.append('key1','value1');
formData.append('key2','value2');

// Display the key/value pairs
for (var pair of formData.entries())
{
 console.log(pair[0]+ ', '+ pair[1]); 
}

वहाँ भी है formData.get()और formData.getAll()व्यापक ब्राउज़र समर्थन के साथ, लेकिन वे केवल वैल्यूज़ को लाते हैं और कुंजी को नहीं। अधिक जानकारी के लिए लिंक देखें।

Comments

FormData ऑब्जेक्ट्स को देखना आखिरकार आसान है! Chrome 50 में अपग्रेड करने के बाद (कल, 13 अप्रैल 2016 को रिलीज़) मेरे लिए यह काम किया।

— जेबीबी

वर जोड़ी का मेरे लिए त्रुटियों फेंकता है। इसके साथ की जगह में कम से कम कुछ मुद्रित करने के लिए लगता है इसकी नहीं एक कुंजी या MDN राज्यों की तरह मूल्य, लेकिन।

— जॉनी वेलकर

ES6:for (const pair of formData.entries()) { console.log(pair[0], pair[1]); }

— 2540625 0

... के लिए है ES6सुविधा और यह केवल कुछ ब्राउज़र में काम करेंगे। MDN के अनुसार

— Zanshin13

अधिकांश IE में समर्थित नहीं है। आईई एज में केवल समर्थित

— मिंगका

Answer 4

कुछ मामलों में, का उपयोग:

for(var pair of formData.entries(){... 

असंभव है।

मैंने इस कोड को प्रतिस्थापन में उपयोग किया है:

var outputLog = {}, iterator = myFormData.entries(), end = false;
while(end == false) {
   var item = iterator.next();
   if(item.value!=undefined) {
       outputLog[item.value[0]] = item.value[1];
   } else if(item.done==true) {
       end = true;
   }
    }
console.log(outputLog);

यह बहुत स्मार्ट कोड नहीं है, लेकिन यह काम करता है ...

आशा है कि यह मदद करेगा।

Comments

यदि यह doneपहले जाँचता है तो मैं इस कथन को फ्लिप करूँगा । doneआधिकारिक झंडा है; यदि doneवह गलत है या निर्दिष्ट नहीं है, तो valueएक मान्य आइटम है (भले ही यह मूल्य रखता हो undefined)। जब doneमौजूद है और true, अनुक्रम का अंत पहुँच गया है, और valueपरिभाषित भी नहीं करना है। यदि valueपरिभाषित किया गया है जब doneहै true, तो valueपुनरावृत्ति मान के रूप में व्याख्या की जाती है। developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

— Triynko

Answer 5

जब मैं कोणीय 5+ (टाइपस्क्रिप्ट 2.4.2 के साथ) पर काम कर रहा हूं, तो मैंने निम्नानुसार कोशिश की और यह स्थिर जाँच त्रुटि को छोड़कर काम करता है, लेकिन यह भी for(var pair of formData.entries())काम नहीं कर रहा है।

formData.forEach((value,key) => {
      console.log(key+" "+value)
});

var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

formData.forEach((value,key) => {
  console.log(key+" "+value)
});

स्टैकब्लिट्ज़ पर जाँच करें

Comments

+ IE 11 के साथ संगत नहीं है (value, key) => {..। सरदर्द !

— डेल्फिन

अच्छा। आपको 10 स्टार देना चाहता हूं।

— अब्दुल्ला नूरुम

Answer 6

आसान विधि

मैंने इस कोड को कोणीय 8 में उपयोग किया है

var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

 formData.forEach((value,key) => {
    console.log(key+value)
     });

Answer 7

ES6 + समाधान:

प्रपत्र डेटा की संरचना देखने के लिए:

console.log([...formData])

प्रत्येक कुंजी-मूल्य जोड़ी देखने के लिए:

for (let [key, value] of formData.entries()) {
  console.log(key, ':', value);
}

Answer 8

यहाँ कंसोल के लिए ऑब्जेक्ट के रूप में FormData ऑब्जेक्ट की प्रविष्टियों को लॉग करने के लिए एक फ़ंक्शन है।

export const logFormData = (formData) => {
    const entries = formData.entries();
    const result = {};
    let next;
    let pair;
    while ((next = entries.next()) && next.done === false) {
        pair = next.value;
        result[pair[0]] = pair[1];
    }
    console.log(result);
};

MDN पर doc .entries()

MDN पर .next()और.done

Answer 9

  function abc(){ 
    var form = $('#form_name')[0]; 
        var formData = new FormData(form);
        for (var [key, value] of formData.entries()) { 
            console.log(key, value);
        }
        $.ajax({
            type: "POST",
            url: " ",
            data:  formData,
            contentType: false,
            cache: false,
            processData:false,
            beforeSend: function() {

            },
            success: function(data) {


            },

       });
}

Comments

+ IE 11 के साथ संगत नहीं है for...of..। सरदर्द !

— डेलफिन

Answer 10

आपको यह समझना होगा कि इसका FormData::entries()एक उदाहरण है Iterator।

इस उदाहरण फॉर्म को लें:

<form name="test" id="form-id">
    <label for="name">Name</label>
    <input name="name" id="name" type="text">
    <label for="pass">Password</label>
    <input name="pass" id="pass" type="text">
</form>

और यह जेएस-लूप:

<script>
    var it = new FormData( document.getElementById('form-id') ).entries();
    var current = {};
    while ( ! current.done ) {
        current = it.next();
        console.info( current )
    }
</script>

Answer 11

कोणीय 7 में मुझे कोड ऑफ लाइन का उपयोग करके कंसोल पर प्रविष्टियां मिलीं।

formData.forEach(entries => console.log(entries));

Answer 12

पहले से ही उत्तर दिया गया है, लेकिन यदि आप प्रस्तुत फ़ॉर्म से आसान तरीके से मान प्राप्त करना चाहते हैं तो आप एक अच्छा नक्शा प्राप्त करने के लिए नए मैप बनाने के साथ संयुक्त प्रसार ऑपरेटर का उपयोग कर सकते हैं।

new Map([...new FormData(form)])

Comments

हालाँकि - इसमें inp_nam [some_mult] [] के साथ एक समस्या है - केवल आखिरी बार देखा गया है

— आधा

Answer 13

में typeScriptकी angular 6, इस कोड मेरे लिए काम कर रहा है।

var formData = new FormData();
formData.append('name', 'value1');
formData.append('name', 'value2');
console.log(formData.get('name')); // this is return first element value.

या सभी मूल्यों के लिए:

console.log(formData.getAll('name')); // return all values

Answer 14

इस फ़ंक्शन का प्रयास करें:

function formDataToObject(formData) {
  return Array.from(formData.entries()).reduce((old, pair) => ({
    ...old,
    [pair[0]]: pair[1],
  }), {});
}

Comments

हालांकि यह कोड स्निपेट समाधान हो सकता है, जिसमें स्पष्टीकरण भी शामिल है , जो आपके पोस्ट की गुणवत्ता को बेहतर बनाने में मदद करता है। याद रखें कि आप भविष्य में पाठकों के लिए प्रश्न का उत्तर दे रहे हैं, और उन लोगों को आपके कोड सुझाव के कारणों का पता नहीं चल सकता है।

— जोहान

Answer 15

MDN पता चलता है निम्नलिखित प्रपत्र:

let formData = new FormData();
formData.append('name', 'Alex Johnson')
for(let keyValuePair of formData.entries()){
    console.log(keyValuePair); //has form ['name','Alex Johnson']
}

वैकल्पिक रूप से

for (let [key, value] of formData.entries()) {
 console.log(key, ':', value);
}

ब्राउज़र या पर्यावरण नवीनतम जावास्क्रिप्ट और फॉर्मडाटा एपीआई का समर्थन नहीं करने की स्थिति में ES + Polyfills को जोड़ने पर विचार करें ।

आशा है कि ये आपकी मदद करेगा।

Comments

क्या आपने इसे चलाने से पहले इस कोड का परीक्षण किया था? formData()पहले पूंजीकृत होना चाहिए। साथ ही, आपकी for ... of loopपंक्ति 3 में निहित रूप से FormData.entries को कॉल किया जा रहा है, आप इसे new FormData()[Symbol.iterator]कंसोल में चलाकर देख सकते हैं । अंत में, यदि आप इसे एज जैसे ब्राउज़रों में चलाते हैं, जो फॉर्मडैट.एन्ट्रीज का समर्थन नहीं करते हैं, तो आपको अप्रत्याशित परिणाम मिलते हैं, जैसे कि फॉर्मडाटा ऑब्जेक्ट पर उपलब्ध विधि नाम को प्रिंट करना:>>> var data = new FormData(); data.append("Foo", "Bar"); for(let x in data){console.log(x)}; <<< 'append'

— लवथेनकेडगंज