how to append array of objects to formData

Question

i have a dynamic form and i save all values in one useState that name is formFieldsand output like this:

   {
      title: "aaa",
      description: "bbb",
      second_description: "ccc",
      step_number: 1,
      image: null,
    },
   {
      title: "zzz",
      description: "xxx",
      second_description: "eee",
      step_number: 2,
      image: null,
    }
]

i sholud save this array of objects and send as POST request like this:

{
 steps: [
         {
      title: "aaa",
      description: "bbb",
      second_description: "ccc",
      step_number: 1,
      image: null,
    },
   {
      title: "zzz",
      description: "xxx",
      second_description: "eee",
      step_number: 2,
      image: null,
    }

    ]
}

but with this code i can't append this objects inside steps[]

   formFields.forEach((item) => {
      formData.append("steps[]", item);
    });

and show me in console like this: steps: Array [ "[object Object]", "[object Object]" ]

objects save like string in steps! , but i want to save object how i can do that?

Does this answer your question? Can I append an array to 'formdata' in javascript? — Konrad
– Konrad, Commented Jan 6, 2023 at 14:16
@Konrad with JSON.stringify | save like this : "{\"title\":\"aaaaaaaaaa\",\"description\":\"aaaaaaaaa\",\"second_description\":\"aaaaaaaaaaaaaaaaaaaaaaaaaa\",\"step_number\":1,\"image\":null}" — Ariana
– Ariana, Commented Jan 6, 2023 at 14:20

MirHossein · Accepted Answer · 2023-01-06 19:37:55Z

1

When you use the below code, it is not saved in the way you want

formFields.forEach((item) => {
      formData.append("steps[]", item);
});

because steps is an array, you need to assign the number of each array to it:

       const name = "steps";

        formFields.forEach((item,i) => {
            formData.append((name + '[' + i + ']'+["[title]"]), item["title"]);
            formData.append((name + '[' + i + ']'+["[description]"]), item["description"]);
            formData.append((name + '[' + i + ']'+["[second_description]"]), item["second_description"]);
            formData.append((name + '[' + i + ']'+["[step_number]"]), item["step_number"]);
          });

answered Jan 6, 2023 at 19:37

MirHossein

263 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ahmad ghoneim · Accepted Answer · 2023-01-06 15:14:45Z

0

does this answer your question?

let formFields = [{
      title: "aaa",
      description: "bbb",
      second_description: "ccc",
      step_number: 1,
      image: null,
    },
   {
      title: "zzz",
      description: "xxx",
      second_description: "eee",
      step_number: 2,
      image: null,
    }]
;

let formData = {};
formData.steps = [];

formFields.forEach((item) => {
    formData.steps.push(item);
});

JSON.stringify(formData);

//output 

'{"steps":[{"title":"aaa","description":"bbb","second_description":"ccc","step_number":1,"image":null},{"title":"zzz","description":"xxx","second_description":"eee","step_number":2,"image":null}]}'

answered Jan 6, 2023 at 15:14

Ahmad ghoneim

9377 silver badges14 bronze badges

1 Comment

Ariana Over a year ago

steps not append to formData when i send as POST API

Collectives™ on Stack Overflow

how to append array of objects to formData

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related