#Get data from formData from multiple inputs like: <input type="number" name="tasks[1][order]" />

1 messages · Page 1 of 1 (latest)

ornate falcon
#

Hi guys, one question.
I am using react-router and I have a <Form> with multiple rows. Each row represents a row of the database and I have an input on each of these rows.
Very simplified, it looks like this:

<table>
    <tbody>
        <td><input type="number" name="tasks[1][order]" /></td>
        <td><input type="number" name="tasks[2][order]" /></td>
        <td><input type="number" name="tasks[3][order]" /></td>
    </tbody>
</table>

how can I access all those inputs names/values in the "action" function? I need to add them to the body of a POST request.
thanks 🙂

#

Get data from formData from multiple inputs like: <input type="number" name="tasks[1][order]" />

lucid kraken
#

When you submit a form, they will be all in the form payload (just like a regular html form)

ornate falcon
#

could you show me an example?
I'm trying both these ways:

    const tasksData = {
    tasks: data.get("tasks"),
  };

  const response = await fetch("http://localhost:8000/api/cms/promo/update", {
    method: "POST",
    body: JSON.stringify(tasksData),
    credentials: "include",
    headers: {
      Accept: "application/json, text/plain, */*",
      "Content-Type": "application/json",
      "X-XSRF-TOKEN": decodeURIComponent(getCookieValue("XSRF-TOKEN")),
    },
  });```



```const data = await request.formData();

  const response = await fetch("http://localhost:8000/api/cms/promo/update", {
    method: "POST",
    body: JSON.stringify(data),
    credentials: "include",
    headers: {
      Accept: "application/json, text/plain, */*",
      "Content-Type": "application/json",
      "X-XSRF-TOKEN": decodeURIComponent(getCookieValue("XSRF-TOKEN")),
    },
  });```

and neither seems to work.
I've set the backend to return what I send and it always returns an empty array.
lucid kraken
#

Show me thge full action pls

ornate falcon
# 
  const getCookieValue = (name) => {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(";").shift();
  };

  const data = await request.formData();

  const response = await fetch("http://localhost:8000/api/cms/promo/update", {
    method: "POST",
    body: JSON.stringify(data),
    credentials: "include",
    headers: {
      Accept: "application/json, text/plain, */*",
      "Content-Type": "application/json",
      "X-XSRF-TOKEN": decodeURIComponent(getCookieValue("XSRF-TOKEN")),
    },
  });

  if (!response.ok) {
    console.log("NOT OK");
    console.log(await response.json());
    return null;
  }

  console.log("OK");
  const resData = await response.json();
  console.log(resData);
  // console.log(await response.json());
  return null;
};
ornate falcon
#

so, i've been able to fix it in part.
I've extrated Object.fromEntries(data)

#

the problem now is that it doesn't seem to be the same as when I make a POST request like this

#

this is the object that gets sent:

    "promos[14][ordine]": "7",
    "promos[9][ordine]": "12",
    "promos[19][ordine]": "31",
    "promos[2][ordine]": "33",
    "promos[20][ordine]": "34",
    "promos[7][ordine]": "36",
    "promos[11][ordine]": "54",
    "promos[10][ordine]": "60",
    "promos[8][ordine]": "67",
    "promos[16][ordine]": "71",
    "promos[13][ordine]": "76",
    "promos[3][ordine]": "80",
    "promos[17][ordine]": "81",
    "promos[5][ordine]": "82",
    "promos[12][ordine]": "85",
    "promos[1][ordine]": "86",
    "promos[6][ordine]": "89",
    "promos[4][ordine]": "90",
    "promos[15][ordine]": "93",
    "promos[18][ordine]": "100"
}```