তথ্য গঠনে জেএস অবজেক্টকে রূপান্তর করুন

Question

আমি কীভাবে আমার জেএস অবজেক্টে রূপান্তর করতে পারি FormData?

যে কারণে আমি এটি করতে চাই তা হ'ল আমার কাছে একটি বস্তু রয়েছে যা আমি ~ 100 ফর্ম ক্ষেত্রের মানগুলি থেকে তৈরি করেছিলাম।

var item = {
   description: 'Some Item',
   price : '0.00',
   srate : '0.00',
   color : 'red',
   ...
   ...
}

এখন আমাকে আমার ফর্মটিতে আপলোড ফাইলের কার্যকারিতা যুক্ত করতে বলা হয়েছে যা অবশ্যই JSON এর মাধ্যমে অসম্ভব এবং তাই আমি সরানোর পরিকল্পনা করছি FormData। তাহলে কি আমার কোন উপায় আছে যে আমি আমার জেএস বস্তুকে রূপান্তর করতে পারি FormData?

Comments

আপনি আপনার কাজ / অগ্রগতি ভাগ করতে পারেন?

— itত্বিকেশ

JSON.stringify () সম্পর্কে কীভাবে?

— সানি শর্মা

@ সানি - এটি একটি স্ট্রিংয়ে একটি জেএসএন পাঠ্য উত্পাদন করবে। এটি কোনও FormDataবস্তু নয়।

— কোয়ান্টিন

হ্যাঁ আপনি পারেন, আপনি ফর্মডাটা অবজেক্টগুলিতে সংযোজন করতে পারেন।

— অ্যাডেনিও

আপনি ফর্মডাটা বলতে কী বোঝাতে পারেন? কোন নির্দিষ্ট বিন্যাস?

— সানি শর্মা

Answer 1

আপনার যদি কোনও অবজেক্ট থাকে তবে আপনি সহজেই একটি ফর্মড্যাটা অবজেক্ট তৈরি করতে পারেন এবং সেই বস্তু থেকে ফর্মডাটাতে নাম এবং মান যুক্ত করতে পারেন।

আপনি কোনও কোড পোস্ট করেন নি, তাই এটি একটি সাধারণ উদাহরণ;

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

এমডিএন- তে ডকুমেন্টেশনের আরও উদাহরণ রয়েছে

Comments

@ লিয়ার - itemএটি ওপি কর্তৃক তৈরি একটি নিয়মিত অবজেক্ট, সুতরাং এর কোনও সম্পত্তি তার নিজস্ব নয় should যদি না কেউ যদি অবজেক্ট কনস্ট্রাক্টরের কোনও কিছু প্রোটোটাইপ করার ভুল না করে, তবে এই ক্ষেত্রে আপনি সমস্যার জগতে পড়বেন , এবং এটি এমন কিছু নয় যা আমাদের বিরুদ্ধে রক্ষা করা উচিত।

— অ্যাডেনেও

@ লিয়ার - এটি ফর্মডাটাতে মূল / মান জোড় যুক্ত করে একটি প্রোটোটাইপযুক্ত সম্পত্তি যুক্ত করে কোনও কিছু ভাঙবে Object.keysনা , এবং ব্যবহার করা উত্তর নয়, কারণ আপনাকে অ্যারে হিসাবে কীগুলি পেতে হবে না, তারপরে কীগুলি পেতে পুনরাবৃত্তি হবে মানগুলি, আপনার একটি for..inলুপ ব্যবহার করা উচিত ।

— অ্যাডিনিও

অবশ্যই এটি হবে, আপনি জানেন না যে সার্ভারটি কী প্রত্যাশা করছে ... কারণ জেএসে প্রোব্ল্যাম্যাটিক, সমাধানটি অবজেক্ট.কিজ () হতে হবে না, এটি হ'ল ওপেনপ্রটি () হতে পারে, তবে এটি কমপক্ষে একটি সতর্কতা হওয়া দরকার।

— লাইয়ার

@ লিয়র - যদি কোনও পোষ্ট অনুরোধে আপনার সার্ভারটি যদি আরও একটি কী / মান জুটি পায় তখন এটি ভেঙে যায়, আপনি এটিকে ভুল করছেন। আমি মনে করি উত্তরটি ঠিক আছে, এবং আমি এটি ব্যবহার করতে Object.keysবা hasOwnProperty()বস্তুটি প্রশ্নটিতে পোস্ট করা হয় এবং এগুলির কোনওটির প্রয়োজন হবে না should আপনি কখনও কখনও hasOwnPropertyপ্লাগইন ইত্যাদি ব্যবহার করতে দেখেন কারণ আপনি কখনই জানেন না যে কিছু লোক Objectনির্মাণকারীকে কী করতে পারে তবে বেশিরভাগ অংশের জন্য লোকেরা তাদের তৈরি বস্তুগুলির উত্তরাধিকারী সম্পত্তিগুলির পরীক্ষা করতে হবে না, এটি একটি চিহ্ন that আপনি সম্ভবত কিছু ভুল করছেন

— অ্যাডিনিও

@ লিয়র আপনি কি পরবর্তী খড় থেকে বিমান তৈরির পরিকল্পনা করছেন, এই আশায় যে আরও সত্যিকারের বিমানগুলি আকাশ থেকে খাবার ফেলে দেবে? কেন একটি 'ওজনপ্র্টি' চেক ব্যবহৃত হয় তা বোঝা গুরুত্বপূর্ণ , কেবল বলা জিনিসগুলিকে "সেরা অনুশীলন" হিসাবে বিবেচনা করা হয় কারণ আপনি কারও (অনুমান, ক্রকফোর্ডের) বইটি খুব বেশি দূরে পাবেন না, সহকর্মীকে শিক্ষিত করার চেষ্টা করছেন তাই 100 বারেরও বেশি সদস্য সহ খ্যাতি এবং আপনার কাছে থাকা উত্তরগুলির 100 গুন আপনার পয়েন্টকে খুব বেশি সহায়তা করে না। এছাড়াও, নাম এক নতুন তৃতীয় পক্ষের liberal এর সংক্ষিপ্ত রূপ যে প্রোটোটাইপ পরিবর্তন? সেই পোস্টটি অন্য সময়ের থেকে ...

— বেনিয়ামিন গ্রুইনবাউম

Answer 2

ES6 এবং আরও কার্যকর ক্রিয়াকলাপের পদ্ধতির সাথে @ অ্যাডিনিওর উত্তরটি দেখতে এরকম হতে পারে:

function getFormData(object) {
    const formData = new FormData();
    Object.keys(object).forEach(key => formData.append(key, object[key]));
    return formData;
}

এবং বিকল্পভাবে ব্যবহার .reduce()এবং তীর-ফাংশন:

getFormData = object => Object.keys(object).reduce((formData, key) => {
    formData.append(key, object[key]);
    return formData;
}, new FormData());

Answer 3

এই ফাংশনটি ফর্মডাটাতে অবজেক্ট থেকে সমস্ত ডেটা যুক্ত করে

@ বিকাশকারী 33 এর ES6 সংস্করণ:

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)

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

Comments

ভাল

— বিবেক দোশি

খুব ভাল কাজ করে! ধন্যবাদ! আমিও যোগ করার জন্য ছিল && !(data instanceof Blob)আমার ছবি আপলোড করার জন্য আমার ক্ষেত্রে

— Clément Baconnier

আমার পক্ষে ভাল কাজ করে, যদি আমি যুক্ত করি (টাইপফ ডাটা === 'অবজেক্ট' && ডেটা! == নাল) - কারণ মানটি বাতিল হলে এটি ব্যতিক্রম

— ছুঁড়েছিল

ES6 সংস্করণের জন্য, আমি && !(Array.isArray(data) && !data.length)"যদি" শর্তে যুক্ত করেছি, বা খালি অ্যারে সরানো হবে।

— Mtxz

Answer 4

অন্য উত্তরগুলি আমার কাছে অসম্পূর্ণ ছিল। আমি @ ভ্লাদিমির নোভাপাশিন উত্তর থেকে শুরু করে এটিকে সংশোধন করেছি। এখানে আমার প্রয়োজনীয় জিনিসগুলি এবং বাগটি পাওয়া গেছে:

• ফাইলের জন্য সমর্থন
• অ্যারে জন্য সমর্থন
• বাগ: এর .propপরিবর্তে জটিল বস্তুর অভ্যন্তরে ফাইল যুক্ত করা দরকার [prop]। উদাহরণস্বরূপ, formData.append('photos[0][file]', file)Google Chrome উপর কাজ করে নি, যখন formData.append('photos[0].file', file)কাজ
• আমার বস্তুর কিছু বৈশিষ্ট্য উপেক্ষা করুন

নিম্নলিখিত কোডটি আইই 11 এবং চিরসবুজ ব্রাউজারগুলিতে কাজ করা উচিত।

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

Comments

অ্যারে, অবজেক্ট এবং ফাইলগুলিকে সমর্থন করার একমাত্র উত্তর।

— sotn

হাই, আপনি রুটটিতে ফাইল যুক্ত করবেন কেন? এটি কি সন্তানের সাথে যুক্ত করা সম্ভব?

— সিড্রিক আর্নল্ড

@ সিড্রিকআরনল্ড এটি একটি ভুল বোঝাবুঝি হতে পারে তবে পদ্ধতিটি পুনরাবৃত্ত হয় যদিও এটি লেখা থাকলেও এর formData.append(root, data)অর্থ এই নয় যে এটি মূলটিতে যুক্ত হয়েছে।

— গুদ্রাদাইন

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

— সিড্রিক আর্নল্ড

আমি এটি ব্যবহার করার চেষ্টা করছি কিন্তু ব্যবহারের উদাহরণ নেই। উপেক্ষিত তালিকা পরমের প্রত্যাশিত বিন্যাসটি বেশ সহায়ক হবে।

— jpro

Answer 5

নীচের মত JSON.stringify ফাংশন চেষ্টা করুন

var postData = JSON.stringify(item);
var formData = new FormData();
formData.append("postData",postData );

Comments

এটি অর্জনের এটি সেরা উপায়।

— রব

এটি বেশ কয়েকবার ত্রুটি ডিবাগের পরে

— স্নো বেসগুলি

Answer 6

আমার এমন একটি দৃশ্য ছিল যেখানে ফর্ম ডেটা তৈরি হওয়ার সময় নেস্টেড জেএসওনকে একটি রৈখিক ফ্যাশনে সিরিয়ালিত করতে হয়েছিল, যেহেতু সার্ভারটি এভাবেই মূল্যবোধ প্রত্যাশা করে। সুতরাং, আমি একটি ছোট পুনরাবৃত্তির ফাংশন লিখেছি যা JSON এর অনুবাদ করে যা এর মতো:

{
   "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"
   }
}

এর মতো কিছুতে:

{
   "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"
}

সার্ভারটি রূপান্তরিত ফর্ম্যাটে থাকা ফর্ম ডেটা গ্রহণ করবে।

ফাংশনটি এখানে:

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

আবাহন:

        var testJSON = {};
        var form_data = jsonToFormData (jsonForPost, testJSON);

আমি রূপান্তরিত ফলাফলগুলি দেখতে কেবল টেস্টজেসন ব্যবহার করছি যেহেতু আমি ফর্ম_ডেটার সামগ্রীগুলি বের করতে সক্ষম হব না। আজাক্স পোস্ট কল:

        $.ajax({
            type: "POST",
            url: somePostURL,
            data: form_data,
            processData : false,
            contentType : false,
            success: function (data) {
            },
            error: function (e) {
            }
        });

Comments

হাই রাজ, অ্যারে কেমন? বলুন যে আপনার কাছে 1 টিরও বেশি বিলিং ঠিকানা রয়েছে। আপনি কিভাবে এটি ঠিক করবেন?

— সাম

আমি উত্তর খুঁজে পেয়েছি! আপনার পোস্ট সত্যিই সহায়ক। ধন্যবাদ!

— সাম

Answer 7

দেরিতে উত্তরের জন্য দুঃখিত, তবে অ্যাঙ্গুলার 2 বর্তমানে ফাইল আপলোড সমর্থন করে না বলে আমি এই নিয়ে লড়াই করছি। সুতরাং, এটি করার উপায়টি XMLHttpRequestদিয়ে পাঠানো হয়েছিল FormData। সুতরাং, আমি এটি করার জন্য একটি ফাংশন তৈরি করেছি। আমি টাইপস্ক্রিপ্ট ব্যবহার করছি । এটি জাভাস্ক্রিপ্টে রূপান্তর করতে কেবল ডেটা প্রকারের ঘোষণাকে সরান।

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

Comments

[]অক্ষত থাকার জন্য আপনাকে সংখ্যার অ্যারেতে অবজেক্ট প্রোপার্টিগুলির পরিবর্তে অ্যারের সূচকগুলি অন্তর্ভুক্ত করতে হবে

— ভিসারি

Answer 8

টাইপস্ক্রিপ্ট সংস্করণ:

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

Comments

প্রথম সব, namespaceমধ্যে একটি সংরক্ষিত শব্দ হয় TypeScript( typescriptlang.org/docs/handbook/namespaces.html এবং github.com/Microsoft/TypeScript/issues/... )। এছাড়াও, মনে হচ্ছে যে আপনি মোকাবেলা করতে ভুলে গেছি Fileগত যেহেতু elseইচ্ছা append "[object File]"করতে formData।

— Jyrkka

Answer 9

আপনি কেবল ইনস্টল করতে পারেন qs:

npm i qs

কেবল আমদানি করুন:

import qs from 'qs'

আপত্তি আপত্তি qs.stringify():

var item = {
   description: 'Some Item',
   price : '0.00',
   srate : '0.00',
   color : 'red',
   ...
   ...
}

qs.stringify(item)

Answer 10

recursively

const toFormData = (f => f(f))(h => f => f(x => h(h)(f)(x)))(f => fd => pk => d => {
  if (d instanceof Object) {
    Object.keys(d).forEach(k => {
      const v = d[k]
      if (pk) k = `${pk}[${k}]`
      if (v instanceof Object && !(v instanceof Date) && !(v instanceof File)) {
        return f(fd)(k)(v)
      } else {
        fd.append(k, v)
      }
    })
  }
  return fd
})(new FormData())()

let data = {
  name: 'John',
  age: 30,
  colors: ['red', 'green', 'blue'],
  children: [
    { name: 'Max', age: 3 },
    { name: 'Madonna', age: 10 }
  ]
}
console.log('data', data)
document.getElementById("data").insertAdjacentHTML('beforeend', JSON.stringify(data))

let formData = toFormData(data)

for (let key of formData.keys()) {
  console.log(key, formData.getAll(key).join(','))
  document.getElementById("item").insertAdjacentHTML('beforeend', `<li>${key} = ${formData.getAll(key).join(',')}</li>`)
}

<p id="data"></p>
<ul id="item"></ul>

Comments

সেরা উত্তর imho

— লিংক

Answer 11

এই পদ্ধতিটি একটি জেএস বস্তুকে একটি ফর্মডাটাতে রূপান্তর করে:

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

Comments

কেবল পুনরাবৃত্তি নেস্টেড অবজেক্ট এন্ট্রি কলগুলি ঠিক করুন: Object.entries(value).forEach((v, k) => acc.append(`${key}[${v[0]}]`, v[1]));

— হেবার জিন্টিলিন

Answer 12

আমার ক্ষেত্রে আমার বস্তুরও সম্পত্তি ছিল যা ফাইলগুলির অ্যারে ছিল। যেহেতু তারা বাইনারি তাই তাদের আলাদাভাবে আচরণ করা উচিত - সূচকে কীটির অংশ হওয়ার দরকার নেই। সুতরাং আমি @ ভ্লাদিমির নোভাপাশিন এবং @ বিকাশক ০৩৩ এর উত্তরটি পরিবর্তন করেছি:

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

Answer 13

আমি ফর্ম ডেটা হিসাবে আমার বস্তুর ডেটা পোস্ট করার জন্য এটি ব্যবহার করেছি।

const encodeData = require('querystring');

const object = {type: 'Authorization', username: 'test', password: '123456'};

console.log(object);
console.log(encodeData.stringify(object));

Answer 14

হতে পারে আপনি এটির সন্ধান করছেন , এমন একটি কোড যা আপনার জাভাস্ক্রিপ্ট অবজেক্টটি গ্রহণ করে, এটি থেকে একটি ফর্মড্যাটা অবজেক্ট তৈরি করে এবং তারপরে এটি নতুন সার্চ এপিআই ব্যবহার করে আপনার সার্ভারে পোস্ট করুন :

    let myJsObj = {'someIndex': 'a value'};

    let datos = new FormData();
    for (let i in myJsObj){
        datos.append( i, myJsObj[i] );
    }

    fetch('your.php', {
        method: 'POST',
        body: datos
    }).then(response => response.json())
        .then(objson => {
            console.log('Success:', objson);
        })
        .catch((error) => {
            console.error('Error:', error);
        });

Answer 15

আমি এটি গুদ্রাদাইনের উত্তর থেকে উল্লেখ করি । আমি এটিকে টাইপস্ক্রিপ্ট ফর্ম্যাটে কিছুটা সম্পাদনা করি।

class UtilityService {
    private appendFormData(formData, data, rootName) {

        let root = rootName || '';
        if (data instanceof File) {
            formData.append(root, data);
        } else if (Array.isArray(data)) {
            for (var i = 0; i < data.length; i++) {
                this.appendFormData(formData, data[i], root + '[' + i + ']');
            }
        } else if (typeof data === 'object' && data) {
            for (var key in data) {
                if (data.hasOwnProperty(key)) {
                    if (root === '') {
                        this.appendFormData(formData, data[key], key);
                    } else {
                        this.appendFormData(formData, data[key], root + '.' + key);
                    }
                }
            }
        } else {
            if (data !== null && typeof data !== 'undefined') {
                formData.append(root, data);
            }
        }
    }

    getFormDataFromObj(data) {
        var formData = new FormData();

        this.appendFormData(formData, data, '');

        return formData;
    }
}

export let UtilityMan = new UtilityService();

Answer 16

আমি পার্টিতে কিছুটা দেরি করতে পারি তবে এটিই আমি একক একক বস্তুকে ফর্মডাটাতে রূপান্তর করতে তৈরি করেছি।

function formData(formData, filesIgnore = []) {
  let data = new FormData();

  let files = filesIgnore;

  Object.entries(formData).forEach(([key, value]) => {
    if (typeof value === 'object' && !files.includes(key)) {
      data.append(key, JSON.stringify(value) || null);
    } else if (files.includes(key)) {
      data.append(key, value[0] || null);
    } else {
      data.append(key, value || null);
    }
  })

  return data;
}

এটা কিভাবে কাজ করে? এটি রূপান্তর এবং সমস্ত বৈশিষ্ট্য প্রত্যাখ্যান তালিকার মধ্যে সেট করা ফাইল অবজেক্টগুলির প্রত্যাশাকে প্রত্যাবর্তন করবে (২ য় আর্গুমেন্ট। যদি কেউ আমাকে এটি নির্ধারণের জন্য আরও ভাল উপায় বলতে পারে যে সাহায্য করবে!)JSON.stringify । তারপরে আপনার সার্ভারে আপনাকে কেবল এটি আবার JSON অবজেক্টে রূপান্তর করতে হবে।

উদাহরণ:

let form = {
  first_name: 'John',
  last_name: 'Doe',
  details: {
    phone_number: 1234 5678 910,
    address: '123 Some Street',
  },
  profile_picture: [object FileList] // set by your form file input. Currently only support 1 file per property.
}

function submit() {
  let data = formData(form, ['profile_picture']);

  axios.post('/url', data).then(res => {
    console.log('object uploaded');
  })
}

আমি এখনও এইচটিটিপি অনুরোধ এবং জাভাস্ক্রিপ্টে নতুন নতুন তাই কোনও প্রতিক্রিয়া অত্যন্ত প্রশংসা হবে!

Answer 17

Obj2fd => https://www.npmjs.com/package/obj2fd ব্যবহার করে দেখুন

import obj2fd from 'obj2fd'

let data = {a:1, b:2, c:{ca:1}};
let dataWithFormData = obj2fd(data);
//result => [a=>1, b=>2, c=>[ca=>1]]