Mult page app - Multi-select values are not being displayed on subsequent pages

  1. My goal:

I’m making a multipage page app and I’m trying to create a form connected to a database then use a multi select list to update the database with the selected options.

Next when I navigate to the next page I want the form to be populated with the selected options

  1. Issue:

Only when I navigate to the next page only shows the one of the option.

Steps I've taken to troubleshoot:

I’ve tried using the code to ensure the that the values are being imported into the database:

{{ {...form1.data, accessible_by: JSON.stringify(multiselect1.value) } }}

Summary

In a multi-page app, a form-connected multiselect writes its selections to a database using JSON.stringify(multiselect1.value), but when navigating to the next page the field only displays one of the previously selected options instead of all of them.

AI Response

This is a data-formatting round-trip issue, not a bug. JSON.stringify() saves the selections as a single serialized string (e.g. '["Road","Canoe"]' or a Postgres array literal like {"Road","Canoe"}), but the multiselect's default/value property expects an actual array of strings. When it receives a string it renders only one (or none) of the values. The fix is to parse the stored value back into an array before binding it to the default value — use {{ JSON.parse(query.data.accessible_by) }} if it was stored as JSON, or split the Postgres array literal into an array (e.g. .split("'").filter((_, i) => i % 2 == 1)) so the component receives ["Road","Canoe"] rather than a string. Confirm the stored column format first, then match the parse method to it.

Sources

:bookmark: How do I format Multiselect data for JSON field when submitting a form?
Solved thread that is the source of the exact JSON.stringify(multiselect1.value) storage pattern, confirming how multiselect data should be written to a JSON/JSONB column.
:bookmark: Multiselect default value not loading
Solved thread covering the identical symptom — values saved to the database but not displaying on load — where the accepted fix is parsing/splitting the stored string back into an array for the multiselect.

The Community Team is testing out a new automation. Let us know if it's helpful (or not) by leaving a :heart:, :+1:, or :-1:. Or by marking this post as the "Solution"! Let us know if you have any feedback here. :rocket:

Hi @James_Gould ,

Thanks for reaching out! JSON.stringify(multiselect1.value) writes a string into the column and unless you parse it back on read, the multiselect on page 2 receives a string where it expects an array so it matches at most one option.

Would you be able to show the column type you are using in this situation?

Depending on the type, you could either drop the JSON.stringify entirely and pass the array directly or you could use another method such as {{ JSON.parse(query.data.accessible_by) }} if the value is stored in a JSON format.

Hi Jeremy,

Thanks for getting back to me.

It’s a simple text field.

I’m using a separate table to populate the list, not sure if that makes a difference.