Passing Array to API from Form w/ Multi-Select

Queries and Resources
1

Trying to pass an array from a form, particularly a multi-select input. This is what needs to be passed to the API:

  "categories": [
    {
      "id": 9
    },
    {
      "id": 14
    }
  ]

I'm using a multi-select input on the form to create the array, but I'm not sure how to properly pass in "id". Obviously using the value "id": 9 for a multi-select item produces "categories":["\"id\":9"].

I thought about manually writing the query using RAW body like this:

"categories": [
{
"id":{{multiselect.value1}},
"id":{{multiselect.ifpresent.value2}}
}
]

but am not sure how to dynamically include all selected values from the multi-select input.

Any help would be greatly appreciated!

2

Are you only passing the id values or the labels as well?
If only the ids then use {{multiselect.value}} but it also depends on what else you are trying tto achieve and what the API needs, and how your form is set up....Need more info - screenshots, more details...

3

I used the form generator to create the form from table data and I'm passing the Form Data Key and values. This is one piece of a larger API call that looks similar to this when sending the form:

 {
   "name": "Premium Quality",
   "type": "simple",
   "regular_price": "21.99",
   "description": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.",
   "short_description": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.",
   "categories": [
     {
       "id": 9
     },
     {
       "id": 14
     }
   ]
 }

CleanShot 2023-07-30 at 09.31.46@2x
CleanShot 2023-07-30 at 09.31.46@2x1920×1141 100 KB

4

Two things:

  1. Still not quite sure what is supposed to happen when you submit the form. If you are looking to store categories as an array in the db then:
    {
    "name": "Premium Quality",
    "type": "simple",
    "regular_price": "21.99",
    "description": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.",
    "short_description": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.",
    "categories":{{multiselect.value}}
    }
  2. When you select multiple categories in the dropdown in the form what does {{multiselect.value}} render to?
5

When I submit the form, it makes a POST request to the Woocommerce API, in the format provided.

{{multiselect.value}} does not work because there's no ID key that the API needs, just the value. Using something like "id":34 literally as the input value, I end up with a string ["\"id\":34"] while the API needs an integer value. There is where the struggle lies - how do I pass "id": along with the integer value so that I get the properly formatted API request outlined previously.

Selecting multiple categories produces:

{
  "categories": [
    34,
    33
  ]
}

Thanks for your time and help @ScottR!

6

You may try something like this to transform the initial data

const categories = [
    34,
    33
  ]
 for(let i=0;i<categories.length;i++){
   categories.push({'id' : categories[i]});
   }
return categories
7

Thanks, @ScottR you got me on the right track for sure!

After some back and forth arguing, I ended up here with the help of GPT4 (I am not a developer, just understand concepts at high-level):

function transformArray(categories) {
    let categoriesWithId = categories.map(num => ({id: num}));
    return categoriesWithId;
}

let categories = {{newProductCategories.value}};
let result = transformArray(categories);
return result
1 Like
8