How to convert Form data before requesting

I used antd. I have a multi choice field on the create page.

<Form.Item name={['user', 'id']} label="user" required>
          <Select {...userProps} mode="multiple" />
</Form.Item>

<Form.Item name={['user', 'id']} label="user" required>
          <Select {...userProps} mode="multiple" />
</Form.Item>

The original data is like this.

{
  user: [1, 2, 3]
}

{
  user: [1, 2, 3]
}

I want to change it to this.

{
  user: [
    {
      id: 1,
    },
    {
      id: 2,
    },
    ...
  ]
}

{
  user: [
    {
      id: 1,
    },
    {
      id: 2,
    },
    ...
  ]
}

What needs to be done?

5 Replies

kapa.ai•2y ago

Hi @greenking19. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•2y ago

---------------------- To transform the data from an array of numbers to an array of objects with an id property, you can use the map function. Here's an example of how you can achieve this:

const transformedData = {
  user: user.map((userId) => ({ id: userId })),
};

const transformedData = {
  user: user.map((userId) => ({ id: userId })),
};

However, based on the information extracts provided, I don't have enough details on how to integrate this transformation directly into your refine form. You may need to refer to the refine documentation (https://refine.dev/docs) for more information on handling form data and customizing the data structure. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Overview | refine

What is refine?

kapa.ai•2y ago

<@1011989779199574036> kapa.ai is still learning and improving, please let us how it did by reacting below

unwilling-turquoise•2y ago

You can follow this https://refine.dev/docs/api-reference/antd/hooks/form/useForm/#how-can-i-change-the-form-data-before-submitting-it-to-the-api

useForm | refine

useForm is used to manage forms. It returns the necessary properties and methods to control the Antd Form. Also, it has been developed by using useForm imported from @refinedev/core package.

complex-teal•2y ago

Thank you！my problem has been resolved @alicanerdurmaz