Multi-Select Inputs - How to Write an Array to the Database

So you may have an input that can have more than one value.

You can use the article from Wappler Docs to see how to create a nice interface for selecting the multiple values, which is linked to below.

You then end up with an array of values. But how do you write that array to your database, maybe along with other single dimensional data?

Let’s assume you have:

  • An array to write to the database called my_array
  • A form that writes the other data to your database too
  • You want to insert a row into your database for each item in the array

Following these simple (but not so obvious!) steps…

In your form:

  1. Create a hidden input in your form that will write all the data to your database.
    Set name = my_array_list
    Set Dynamic Attributes -> Value to be your array, so my_array.items
    This creates a text list of your array values separated by commas, so value1,value2,value3

In your Server Action:

  1. Create a $_POST variable called my_array_list.

  2. Insert a database Multi Insert action.
    This creates a repeat loop, inside of which is a single database insert.
    You want the loop to be repeated for each item in your array… which at the moment are in a comma separated text list in your $_POST.my_array_list variable.
    To do this you need to “split” your my_array_list into separate items for the repeat loop to work with.

  3. Set the repeat “Expression” to {{$_POST.my_array_list.split(",")}}
    Rather than typing all this in, you can use the graphical interface to select the my_array_list post variable then choose the Text- Split String function

  4. You can now reference your specific array value in the Database Insert action with $value.

Good luck!

Antony.

5 Likes

I’m trying to do this for a keyed array but it keeps returning [object Object] for every item in the array. I can add to the array all ok but it doesn’t display correctly in the input so i can pass it thrugh the form to a server side action.

What i’m doing is sending an email, but when sending an email to multiple contacts using the sendgrid api it requires each contact to be in an array with each contacts name and email. So I created a way to input name and email then add to the array which shows up in a repeating div as buttons which shows the name as the text and the email as the value (and tittle for the tooltip to check the email is correct before sending). So I can see that the array is getting the right data but the input that as the array items as a dynamic variable always shows [object Object] for each item.

I also tried using the session and local manager but ran into the same issue with it saving correctly but not displaying in the input correctly.

How sendgrid wants to receive it.
image

The input isn’t hidden at the moment while I’m trying to figure out what’s going on.

This is the dynamic attribute setup for the array items on the input that will be hidden.

I found this way was only writing the last value of the array.

What worked was…

  1. Select the ‘multiple’ checkbox on the post variable’s properties, in server connect.
  2. Format the repeat with values instead of split. ie {{$_POST.my_array_list.values()}}
  3. The form field sending the array needed to have a set of square brackets in the name. ie array_id[]

Everything else as per your instructions.

Cheers.

Multi select is now available in Wappler, thanks to the Tagify component:
See:

1 Like