web-dev-qa-db-ja.com

FormData追加のネストされたオブジェクト

ネストされたオブジェクトをFormDataに追加できますか？

let formData = new FormData();
let data = {
    title: 'title',
    text: 'text',
    preview: {p_title:'p title', p_text: 'p text'}
};

$.each(data, function(key, value) {
    formData.append(key, value);
});

サーバーコンソール-console.log（req.body）

{
    title: 'title',
    text: 'text',
    preview: '[object Object]'
}

preview: {p_title:'p title', p_text: 'p text'}の正確な値を取得するにはどうすればよいですか？

javascriptjqueryjsonnode.jsform-data
7
ShibinRagh

オブジェクトをformDataに追加するには、最初に次のように文字列化する必要があります。

_let objToAppend= {
  key1: value1,
  key2: value2,
}
let formData = new FormDate();
formData.append('obj', JSON.stringify(objToAppend));
_

次に、サーバー側でそれにアクセスするには、最初にJSON.parse()を使用して解析する必要があります。それが役に立てば幸い！

1
Harshit Agarwal

これは、「オブジェクトをFormDataインスタンスに変換する便利なJavaScript関数」です github 、 npmパッケージ としても使用でき、非常に簡単に使用できます

let data = {
    title: 'title',
    text: 'text',
    preview: {p_title:'p title', p_text: 'p text'}
};

var formData = objectToFormData(data);
1
Omar Herrera
let formData = new FormData();
let data = {
  title: 'title',
  text: 'text',
  preview: {p_title:'p title', p_text: 'p text'}
};

for(let dataKey in data) {
  if(dataKey === 'preview') {
    // append nested object
    for (let previewKey in data[dataKey]) {
      formData.append(`preview[${previewKey}]`, data[dataKey][previewKey]);
    }
  }
  else {
    formData.append(dataKey, data[dataKey]);
  }
}

コンソールformData

for (let val of formData.entries()) {
  console.log(val[0]+ ', ' + val[1]); 
}
1
sultan aslam

FormDataの値は自動的にstringに変換されます。 Blob を使用してそれを試すことができます。

または、JSON.stringify(obj)を使用して文字列として置くだけです。

$.each(data, function(key, value){
    if (typeof(value) === 'object') {
        value = new Blob([JSON.stringify(value)], {type : 'application/json'});// or just JSON.stringify(value)
    }
    formData.append(key, value);
});
1
Orest Savchak

object-to-formdata を試してください。これは、オブジェクトをFormDataインスタンスに変換する便利なJavaScript関数です。

import { objectToFormData } from 'object-to-formdata';

const object = {
  /**
   * key-value mapping
   * values can be primitives or objects
   */
};

const options = {
  /**
   * include array indices in FormData keys
   * defaults to false
   */
  indices: false,

  /**
   * treat null values like undefined values and ignore them
   * defaults to false
   */
  nullsAsUndefineds: false,

  /**
   * convert true or false to 1 or 0 respectively
   * defaults to false
   */
  booleansAsIntegers: false,
};

const formData = objectToFormData(
  object,
  options, // optional
  existingFormData, // optional
  keyPrefix, // optional
);

console.log(formData);
0
Sagar Ranglani