Checkbox binding when single selected

Wappler General Need Help
1

I’ve got a checkbox group that is bound to an array from a server connect. When multiple are checked, the binding works great. But when there’s only a single option checked, the server isn’t returning an array, it’s returning a string which is causing the binding to break. How do I handle situations where I’m expecting an array, but a single option is selected?

Works fine if I have selected Option 1 and Option 2, but if only Option 1 is selected, nothing shows.

2

Hello, can you please post some details about what you have on the page, in the server action and what results are you getting (in the browser dev tools) from the server action?

3

Sorry, I thought I did but I picked the wrong formatter for my code.

I have this for the checkbox group (and then a bunch of checkboxes inside)

<div is="dmx-checkbox-group" id="my_checkbox_group" class="checkbox-group" name="MyValues" dmx-bind:value="my_value_array.value" data-rule-minitems="1" data-msg-minitems="Please select at least one value">

And a variable:

<dmx-value id="my_value_array" dmx-bind:value="load.data.query.MyOptions"></dmx-value>

When I Load multiple from the server connect, I get:

"MyOptions": [
            "Option 1",
            "Option 2"
        ],

And that works just fine. But If I check only one, the server returns:

"MyOptions": "Option 1",
4

Any thoughts here?

5 
load.data.query.MyOptions

Is this a database query or any other data? Can you post a screenshot of the db query steps and what exactly is the result in the dev tools after the server action runs?

6

This is a database query from postgres. The column is a json array in the database. The query is:

select "MyOptions" from "Users" where "Users"."UserId" = ?

The result in the dev tools is what I posted before. It's an array if there were 2+ values selected, if only 1 value it's not an array with 1 value it's just a string.

"MyOptions": [
            "Option 1",
            "Option 2"
        ],

One option selected:

"MyOptions": "Option 1",
7

Is this a custom query?

8

This seems to be something postgres specific - returning single values as a string instead of array.
You can try doing something like:

dmx-bind:value="load.data.query.MyOptions.length ? load.data.query.MyOptions : [load.data.query.MyOptions]"
9

That's why I as if it is a custom query, PostgreSQL does exactly what is described here.
I think Wappler standard queries resolve this internally but in the case of a custom query, a single result will not be converted to an array, it has to be coded in with something like below to ensure the output is always an array:

SELECT ARRAY(SELECT item FROM your_table WHERE condition);

2 Likes
10

Thanks all! It wasn't a custom query, but either way I doubt I'm going to get around how postgres is sending the data, I was really looking for a way to clean up the value when I got it on the client side. Wappler AI assistant was suggesting lots of things but none of the syntax was working.

11

Ok, I spoke a bit too soon. I tried

load.data.query.MyOptions.length ? load.data.query.MyOptions : [load.data.query.MyOptions]

and it evaluates properly in dmx.app.data to a valid array. However, whether there are one or multiple the checkboxgroup js is throwing an error, because it's evaluating that and an array with a value of undefined:

BaseComponent.js:59  TypeError: Cannot read properties of undefined (reading 'toString')
    at checkboxGroup.js:84:1
    at Array.map (<anonymous>)
    at s._setValue (checkboxGroup.js:84:1)
    at s.render (checkboxGroup.js:35:1)
    at s.constructor (BaseComponent.js:50:1)
    at s (api.js:5:1)
    at s.<anonymous> (api.js:47:1)
    at new s (api.js:5:1)
    at s.$createChild (BaseComponent.js:139:1)
    at s.<anonymous> (BaseComponent.js:285:1)

This is the value that's passed to the setValue method:

0
: 
undefined
length
: 
1
[[Prototype]]
: 
Array(0)
12

Any thoughts on why the expression is evaluating to null in this case?

13

I think the problem is with how you saved the data in the database. There is no JSON array data type, it is stored as a generic JSON object which can contain anything. The single values are probably stored as JSON strings, multiple values as JSON array and when nothing was selected you probably stored it as NULL. Check first the actual data in the database and fix that or you have to update the expression to handle the 3 different data values.

load.data.query.MyOptions == null ? [] : load.data.query.MyOptions.length ? load.data.query.MyOptions : [load.data.query.MyOptions]
14

That seems to have worked! I think the confusing part here was the fact that the data returned was not null, and yet I still needed to do a null check anyway. I guess the way it loaded in needed to handle the null case before the data got passed. Thanks for the fix!