how to group row of text fields using formData

Question

I'm currently having problem with creating form that can be grouped using form data.

I have this form:

 <form action={formAction} className="flex flex-col w-full justify-around">
        <div className="relative">
          
         <Options
            data={activeUsers.users}
            name="user"
            id="user"
            display1="firstName"
            display2="lastName"
            label="Employee"
            htmlFor="user"
            hideLabel={false}
          />

          <table className="mt-5">
            <thead>
              <tr>
                <th>Success Indicator</th>
                <th>MOV</th>
                <th>Aspect Of Work</th>
              </tr>
            </thead>

            <tbody>
              {inputRows.map((item: any, i: number) => (
                <tr key={i}>

                  <td>
                    <input
                      type="text"
                      id="mov"
                      name={`test[${i}]`}
                      placeholder="MOV"
                      className="rounded-lg py-1 px-1 m-2 text-black"
                      required
                    />
                  </td>

                  <td>
                    <input
                      type="text"
                      id="aspects_of_work"
                      name={`test[${i}]`}
                      placeholder="Aspect of work"
                      className="rounded-lg py-1 px-1 m-2 text-black"
                      required
                    />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          <SubmitBtn />
        </div>
        <p role="status">{state?.message}</p>
      </form>

im expecting a form data like this:

{
 user: 1,
 test: [
 {
  mov: value here,
  aspects_of_work: value here
 },
 {
  mov: value here,
  aspects_of_work: value here
 }
 ]
}

im assuming that the property name is coming from the id property

instead I get this:

    { name: 'user', value: '1' },
    { name: 'test[0]', value: '5' },
    { name: 'test[0]', value: 'qwe' },
    { name: 'test[0]', value: 'ewq' },
    { name: 'test[1]', value: '27' },
    { name: 'test[1]', value: 'rrr' },
    { name: 'test[1]', value: 'rrr' }

I was wondering if I have to this manually using formdata API or should this be automatic. I know rails erb do this but im not sure if it should be the same way.

Im using this on NEXTJS btw.

Answer 1

As I've been searching. there's no really way of grouping an same named property in FormData as it will be converted to a string per documentation https://developer.mozilla.org/en-US/docs/Web/API/FormData/append.

What I've resulted to do is manipulate the formData it self but I have to setup the names of my fields.

name property have a value of STTRING-INDEX to be used later.

{inputRows.map((item: any, i: number) => (
                <tr key={i}>
                  <td>
                    <Options
                      data={sI.successIndicators}
                      name={`successIndicator-${i}`} <--- string - index
                      id="successIndicator"
                      htmlFor="successIndicator"
                      display1="major_final_output"
                      display2="title"
                      label="Success Indicator"
                      hideLabel={true}
                    />
                  </td>

                  <td>
                    <input
                      type="text"
                      name={`mov-${i}`} <--- string - index
                      id="mov"
                      placeholder="MOV"
                      className="rounded-lg py-1 px-1 m-2 text-black"
                      required
                    />
                  </td>

                  <td>
                    <input
                      type="text"
                      name={`aspects_of_work-${i}`} <--- string - index
                      id="aspects_of_work"
                      placeholder="Aspect of work"
                      className="rounded-lg py-1 px-1 m-2 text-black"
                      required
                    />
                  </td>
                </tr>
              ))}

Logic for creating the desired output:

export async function submitNewAspect(prevState: any, formData: FormData) {
  const newFormData = new Map();
  const aspectData: Array<Map<string, string>> = [];
  newFormData.set('aspects', aspectData);
  newFormData.set('user', formData.get('user'))

  for (const [key, value] of formData) {

    if (key === 'user' || key.startsWith('$')) continue; // skip user and nextjs prop

    const [name, index] = key.split('-');

    if (aspectData[Number(index)]) {
       aspectData[Number(index)].set(name, `${value}`)
      } else {
       aspectData[Number(index)] = new Map([[name, `${value}`]]);
      }
    }

  console.log(Object.fromEntries(newFormData))

}

Before Data:

FormData {
  [Symbol(state)]: [
    { name: 'user', value: '2' },
    { name: 'successIndicator-0', value: '5' },
    { name: 'mov-0', value: 'eqw' },
    { name: 'aspects_of_work-0', value: 'qwe' },
    { name: 'successIndicator-1', value: '25' },
    { name: 'mov-1', value: 'qwe' },
    { name: 'aspects_of_work-1', value: 'qwe' }
  ]
}

After Data:

{
  aspects: [
    Map(3) {
      'successIndicator' => '5',
      'mov' => 'eqw',
      'aspects_of_work' => 'qwe'
    },
    Map(3) {
      'successIndicator' => '25',
      'mov' => 'qwe',
      'aspects_of_work' => 'qwe'
    }
  ],
  user: '2'
}

The downside with this is in each Aspects I have to loop to convert each aspect to Object.fromEntries