কিভাবে ফর্মডাটা পরিদর্শন করবেন?

Question

আমি চেষ্টা করে দেখেছি console.logএবং এটি ব্যবহার করে লুপিং করেছি for in।

এখানে এটি ফর্মডাটাতে 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

সুতরাং, আপনার জাভাস্ক্রিপ্টে কোনও কোড যুক্ত না করে ফর্ম ডেটা দেখানোর জন্য কোনও ক্রোম বা ফায়ারফক্স প্লাগইন নেই?

— নাটেল

Answer 1

আপডেট পদ্ধতি:

মার্চ FormData.entries()২০১ 2016 পর্যন্ত, ক্রোম এবং ফায়ারফক্সের সাম্প্রতিক সংস্করণগুলি এখন ফর্মডাটা পরিদর্শন করতে সমর্থন করে । উত্স ।

// 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]); 
}

ঘোস্ট ইকোকে ধন্যবাদ এবং এটিকে নির্দেশ করার জন্য রোলথ !

পুরানো উত্তর:

এই মজিলা নিবন্ধগুলি দেখার পরে দেখে মনে হচ্ছে কোনও ফর্মডাটা অবজেক্ট থেকে ডেটা বের করার কোনও উপায় নেই। আপনি এজেএক্স অনুরোধের মাধ্যমে প্রেরণ করতে কেবল ফর্মডেটা তৈরির জন্য তাদের ব্যবহার করতে পারেন।

আমি এই প্রশ্নটি সবেমাত্র একই জিনিসটি পেয়েছি : ফর্মডাটা.এপেন্ড ("কী", "মান") কাজ করছে না ।

এর চারপাশের একটি উপায় হ'ল নিয়মিত অভিধান তৈরি করা এবং তারপরে এটি ফর্মডাটাতে রূপান্তর করা:

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])। তারপরে প্রয়োজনীয় তথ্য সংযোজন করুন।

— পিটার ভালাদেজ

Iterating জন্য FormData: আই ই / এজ 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)।

আমরা আরো জানি, এবং সত্য FormData এবং উভয় অ্যারে এর একটি আছে Symbol.iteratorএটা প্রোটোটাইপ পদ্ধতি এটি উপর লুপ করতে হচ্ছে না বা কলিং ছাড়া আপনি শুধু কেবল এই কাজ করতে পারে .entries()পুনরুক্তিকারীর হোল্ড পেতে

var fd = new FormData

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

console.log(...fd)

Comments

অপারেটর !! দুর্দান্ত এবং সত্যই সহজ, ফর্মডাটাটি psuedo জসন ফর্ম্যাট হিসাবে প্রদর্শন করে। ধন্যবাদ - নতুন প্রতিক্রিয়াটির জন্য, আমি কেবল [[প্রতিশ্রুতি স্ট্যাটাস]] পেয়েছি: "মুলতুবি"

— প্ল্যাটিনাম

অথবা ওয়েব কনসোল থেকে কেবল লিখুন[...fd]

— শেষবিহীন

হেলস বেলস - আপনি এটি @ ইন্ডলেস আবার করলেন। বন্ধনী ব্যবহার করে কোন পদ্ধতিটিকে বলা হয়?

— প্ল্যাটিনামগুলি

ভাল, বন্ধনীগুলি কেবল একটি অ্যারে এবং আপনি একটি নতুন তৈরি করছেন। আপনি ...সমস্ত আইটেমের সাথে নতুন অ্যারে তৈরি করতে ফর্মডাটা থেকে এন্ট্রিগুলি ছড়িয়ে দিচ্ছেন, তারপরে কনসোলটি আপনি লিখেছেন শেষ লাইন থেকে ফলাফলটি ফেলে দিন

— এন্ডলেস

এখানে সেরা উত্তর - সমস্ত গাম্ফ মুছে ফেলা উচিত এবং কেবল ২ য় কোড স্নিপেট ছেড়ে দেওয়া উচিত - অনেক ধন্যবাদ

— 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

অবশেষে ফর্মডাটা অবজেক্টগুলি অনুসন্ধান করা সহজ! এটি ক্রোম 50 এ আপগ্রেড করার পরে আমার পক্ষে কাজ করেছে (গতকাল 13 এপ্রিল 2016 এ প্রকাশিত হয়েছে)।

— jbb

Var যুগল এর আমার জন্য ত্রুটি ছোঁড়ার। এটা দিয়ে প্রতিস্থাপন করা হচ্ছে মধ্যে অন্তত কিছু প্রিন্ট বলে মনে হয় তার একটা কী বা MDN রাজ্যের মত মান, তবে।

— জনি ওয়েলকার

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

— 2540625

... এর জন্য হয় ES6বৈশিষ্ট্য এবং এটি শুধুমাত্র কয়েকটি ব্রাউজারে কাজ করবে। এমডিএন অনুসারে

— আইআই

এর জন্য বেশিরভাগ আইই সমর্থিত নয়। শুধুমাত্র 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পুনরুক্তি ফেরতের মান হিসাবে ব্যাখ্যা করা হয়। বিকাশকারী.মোজিলা.আর.ইন-

— ইউএস

Answer 5

যখন আমি কৌনিক 5+ (টাইপস্ক্রিপ্ট ২.৪.২ সহ) এ কাজ করছি, আমি নিম্নলিখিত হিসাবে চেষ্টা করেছি এবং এটি একটি স্থির চেকিং ত্রুটি ব্যতীত কাজ করে 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

+ আইই 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

একটি অবজেক্ট হিসাবে কনসোলটিতে ফর্মডাটা অবজেক্টের এন্ট্রিগুলি লগ করার জন্য এখানে একটি ফাংশন রয়েছে।

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 ডক অন .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

+ আইই 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

যদিও - এটি ইনপ_নেম [কিছু_মল্ট] [] নিয়ে সমস্যা রয়েছে - কেবল সর্বশেষ দেখা যায়

— হাফবিত

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 + পলিফিল যুক্ত করার বিষয়টি বিবেচনা করুন ।

আশা করি এটা কাজে লাগবে.

Comments

আপনি এই কোডটি চালানোর আগে পরীক্ষা করেছিলেন? formData()প্রথমত, মূলধন করা উচিত। এছাড়াও, আপনার for ... of loopলাইন 3 লঙ্ঘন করে ফর্মডাটা.এন্ট্রিগুলিতে কল করছে, আপনি new FormData()[Symbol.iterator]কনসোলে চালিয়ে এটি দেখতে পারবেন । অবশেষে, আপনি যদি এজ এর মতো ব্রাউজারগুলিতে চালনা করেন যা ফর্মডাটা.এন্ট্রিগুলিকে সমর্থন করে না, আপনি অপ্রত্যাশিত ফলাফল পেতে পারেন, যেমন ফর্মডাটা অবজেক্টে উপলব্ধ পদ্ধতির নামগুলি মুদ্রণ করার জন্য:>>> var data = new FormData(); data.append("Foo", "Bar"); for(let x in data){console.log(x)}; <<< 'append'

— লাভথনেডগুন