how to append the nested object in FormData, my object is
{
name: 'test',
phone: '454353',
address: [
{
state: 'ewrwer',
city: 'asdasd'
}
]
}
I had append like this
const data = new FormData();
data.append("name", "test");
data.append("phone", "454353");
data.append("address['state']", "ewrwer");
data.append("address['city']", "asdasd");
but this is not working for me when I send this formData in request body the address is not working.
It should be:
data.append("address[0]['state']", "ewrwer");
data.append("address[0]['city']", "asdasd");
Because, it is inside array of index 0, then inside that you have addresses.
Related
I'm trying out a bulk upload functionality where I can get user details like name, email, and profile pic (file) as fields. Upon submitting, they are sent directly to backend models and stored.
I was able to successfully send just one row of data by using Form Data object and appending all the fields including image file field. The issue comes when the uploaded data is more than 1 row. I'm not able to figure out how to send Form Data as array of objects to my backend.
I tried appending formdata to array. So something like
// Convert this
// [
// { name: 'xyz', email: 'xyz#gmai.com', img_name: 'xyz' },
// { name: 'abc', email: 'abc#gmail.com', img_name: 'abc' }
// ]
//
// to
//
// [
// { name: 'xyz', email: 'xyz#gmai.com', image: BinaryFile },
// { name: 'abc', email: 'abc#gmail.com', image: BinaryFile }
// ]
const newDataToSend = []
// append image file to appropriate row according to name
if (imageFiles && imageFiles.length > 0) {
dataToSend.forEach(row => {
const formData = new FormData();
Object.keys(row).forEach(column => {
if (column === "img_name") {
let fileObj;
for (let i = 0; i < imageFiles.length; i++) {
const file = imageFiles.item(i);
if (file && file.name.indexOf(row[column]) > -1) {
fileObj = file;
}
}
if (fileObj) {
formData.append("photo", fileObj);
}
} else {
formData.append(column, row[column]);
}
});
newDataToSend.push(formData);
});
}
This does not work. Throws error code 415 and payload is empty as well.
Are there any other solutions I can try?
could you please add the other codes you have written . possibly you may not have a submit button .
You could do JSON.stringify on the array data like shown in the code snippet:
let formdata = new FormData();
let dataArr = [data1, data2, data3];
formdata.append('dataArr', JSON.stringify(dataArr));
If you have the data in the form of an array of objects, you probably want to do something like this.
const dataToSend = [
{ firstName: 'Robin', lastName: 'Hood'},
{ firstName: 'Kavita', lastName: 'Gurav'},
{ firstName: 'Albert', lastName: 'Einstein'}
];
/** sending the data by the name 'data' */
const formData = new FormData();
formData.append('data', dataToSend);
fetch(<api endpoint>, {
method: 'POST',
body: formData
});
The backend now should be able to read the data submitted from data.
I tried this on my browser, the payload being sent is like below.
Whenever I call a post API to my dynamodb, all the data gets store in one "content" attribute. Is there a way to have a separate attribute for each attribute in the JSON structure?
For instance here is where I am calling the API, the JSON structure of data is in the values variable.
export default (async function submitSite(values) {
console.log(values);
createSite(values);
})
function createSite(site) {
return API.post("sites", "/sites", {
body: site
});
}
and here is the code for the API itself:
export async function main(event, context) {
const data = JSON.parse(event.body);
console.log(data);
var site = "IE"+data.siteCounty+data.siteName;
var siteIdStripped = site.replace(/[aeiou]/g, '');
var siteId = siteIdStripped.replace(/ /g,'');
var siteIdFinal = siteId.toUpperCase();
const params = {
TableName: "sites",
Item: {
userId: event.requestContext.identity.cognitoIdentityId,
siteId: siteIdFinal,
content: data,
createdAt: Date.now()
}
};
When I upload it is has the structure siteId, userId, content(with an object of data), created at.
Id like for it to be displayed as siteId, userId, siteName, siteAddress, etc etc the last 2 being one of the indexes in the json
You are explicitly creating the content attribute here: content: data,. You either need to explicitly set each attribute like this:
Item: {
userId: event.requestContext.identity.cognitoIdentityId,
siteId: siteIdFinal,
siteName: data.siteName,
siteAddress: data.siteAddress,
createdAt: Date.now()
}
Or, you could simplify this with the object spread operator like so:
Item: {
...data,
userId: event.requestContext.identity.cognitoIdentityId,
siteId: siteIdFinal,
createdAt: Date.now()
}
I am creating a POST method via mongo/mongoose:
Department
.create({
name: req.body.name,
link: req.body.link,
state: req.body.state,
requirements: req.body.requirements,
salary: req.body.salary,
description: req.body.description
})
requirements is an object containing other items:
requirements: {
age: 21,
citizenship: "yes",
degree: "4-year"
}
Prior to creating I am checking that all fields were provided:
router.post('/create', (req, res) => {
const requiredFields = ["name", "link", "state", "age", "citizenship", "degree" "salary", "description"];
for(let i=0; i < requiredFields.length; i++){
const field = requiredFields[i];
if(!(field in req.body)){
const message = `Missing \`${field}\` field in request body`;
console.error(message);
return res.status(400).send(message);
};
};
Due to age, citizenship, and degree being object items, I cannot put their string inside the requiredFields. It errors out at Missing age field in request body. Any idea how to check that they were provided in req.body?
To access the nested object you may save your required field as "requirement.age" instead of "age" and then may be use the get function in lodash library. So your condition would become:
`
if (typeof(_.get(req.body, "requirement.age") === 'undefined')) {
//Missing field
}
`
You can try to flatten the req.body structure like:
Object.assign(req.body, req.body.requirement)
// This would make your req.body look like
{
name: 'x',
link: 'y',
requirement: {
age: 1
..
},
age: 1
..
}
Or you may assign it to another variable and then use.
let reqBodyReplica = Object.assign({}, req.body, req.body,requirement)
I'd like to send some custom object in a POST request but synchronously, i.e. I want the browser to refresh and load the new target page, and I do not want to make an ajax request.
In other words, I'd like to submit a form with some custom data object made out of the values of its fields. How would I do that?
function postData()
{
var person = { FirstName: "John", LastName: "Doe" };
// How do I send the person object as a part of the POST data
$("#myForm").submit();
}
You can create the form on the fly:
var myForm = $('<form>', { method: 'POST', target: 'YOUR_TARGET' } ); // create a new form
myForm.append($('<input>', { name: 'FirstName', value: 'John' }));
myForm.append($('<input>', { name: 'LastName', value: 'Doe' }));
myForm.hide().appendTo('body');
myForm.submit()
However, in case you just want to add custom data to an existing form, you can do this instead
var myForm = $('#myForm');
myForm.append($('<input>', { type: 'hidden', name: 'FirstName', value: 'John' }));
myForm.submit()
I have a JSON string as follows:
[
{"TypeName":"Double","TypeID":14},
{"TypeName":"Single","TypeID":43},
{"TypeName":"Family","TypeID":7}
]
It is generated after calling this function in KnockOut:
self.save = function() {
var dataToSave = $.map(self.lines(), function(line) {
return line.product() ? {
TypeName: line.category().TypeName,
TypeID: line.category().TypeID
: undefined
});
alert(JSON.stringify(dataToSave));
However, I want to add 3 more pieces of information to the model, before posting it back to my server - to also send Name, Email and Tel:
{
"Name":"Mark",
"Email":"me#me.com",
"Tel":"0123456789",
"Rooms":
[
{"TypeName":"Double","TypeID":14},
{"TypeName":"Single","TypeID":43},
{"TypeName":"Family","TypeID":7}
]
}
Is there a proper way of adding this information to the JSON, or is it just as simple as:
var toSend = "{\"Name\":\"Mark\":\"Email\":\"me#me.com\", \"Tel\":\"0123456789\",\"Rooms\":"
+ JSON.stringify(dataToSave) + "}";
Thank you,
Mark
Parse your JSON string using JSON.parse into a valid JS object, add the data to the object as needed, then JSON.stringify it back. A JSON string is just a representation of your data, so you shouldn't rely on modifying it directly.
Why encode to JSON and then modify the resulting string when you can pass the structure you actually want to the JSON encdoder?
var toSend = JSON.stringify({
Name: "Mark",
Email: "me#me.com",
Tel: "0123456789",
Rooms: dataToSave
});