Displaying data in input multiselect

Ask us anything
1

I’m new to WeWeb and having difficulty with the data being displayed in my input multiselects.

I have two scenarios.
(1) the data is binding to a page variable.
(2) the data is bound to a Xano database.

(1) The Variable is an array consisting of (Active, Pending, & Deactivated).
I can display the initial value, but the list won’t display.

image
image942×152 21.4 KB

I’ve bound the data to the element’s Options and selected “Active” as the Initial Value

image
image1264×834 94.5 KB

(2) The data is linked to a Xano table and is only showing the initial value.
It’s also displaying the index of each list item instead of the text associated with it.
I assume this has something to to do with the API call and its output but I’m not sure what to do there.

image
image1061×834 83.5 KB

image
image700×332 15.8 KB

2

In you’re screenshot, you’re missing a label and value fields. Basically, the label field is what will be displayed to the user in the dropdown, while the value field is the technical value the input variable will take when the user has selected a choice.

You could totally have the same variables for both labels and values.

3

Thanks for getting back to me Quentin.
I’ve tried adding data to the label & value fields but they’re deactivated and can’t be selected.

image
image1259×707 50.8 KB

4

To what did you bind your options? Is it a list of objects?

5

Yes, it’s a list of objects on a project variable.

image
image427×831 32.9 KB

TBH, I’ve no idea what I’m doing. This is my first time using WeWeb, I’m trying to rebuild an app I have on Bubble.

6

Oh right, it should be a list of objects, here you just have a single object.

Try with:

[
  {"Status": "Active"},
  {"Status": "Pending"},
  {"Status": "Deactivated"}
]

Then try using the Status for both value and label.

If you’re learning WeWeb, I strongly recommend checking the academy.

1 Like
7

Thanks Quentin, I’ve been through the Academy tutorials. They’ve been very helpful.

Sorry for all the hassle, but I’m still struggling somehow.
I’ve updated the object value, selected the label and value fields; however, the only thing shown in the list is the first item.

image
image1343×837 86.5 KB

image
image1008×281 25.2 KB

8

Your list of values should look more like this
[ {“displayText”:”option 1”, “value”: “value”}, {“displayText”:”option 2”, “value”: “other value equivalent}, … ]

Your keys in your objects are all different. They need to be the same for this to work the way you want.

[{key:value},{key:value}]

1 Like
9

Thanks for all the help and advice.
I’m not sure why it wasn’t displaying properly for me earlier, but I finally understand what is required.

If I want to have the same value & label, then I can use one key as @Quentin pointed out; however, if I want to have a different value and label, then I need to identify a key for the label and a key for the value.

[
  {
    "value": "active",
    "label": "Active"
  },
  {
    "value": "pending",
    "label": "Pending"
  },
  {
    "value": "deactivated",
    "label": "Deactivated"
  }
]

All working now :wink:
image