Mapping Array to Dropdown Component: Issue with GraphQL Data

GOAL: Create a drop down list of "Leads" from CRM board (via GraphQL query)

PROBLEM: Mapping multiple items to 'select' component, can select single item values, but can't figure out how to populate menu with all items.


I have successfully built the GraphQL query that fetches all items in specified board.

Returned response looks like this:

** "data": {**
** "boards": [**
** {**
** "items_page": {**
** "cursor": null,**
** "items": [**
** {**
** "id": "6924088206",**
** "name": "Watanabe Floral, Inc."**
** },**
** {**
** "id": "6924758558",**
** "name": "Dakine"**
** }**


This JS Expression to bind data will work but only for one value, it looks like this:

{{[0].items_page.items[0].name }}


{{[0] =>}}

This appears to work to some extent, because when I hover over "Name" it displays: name: "Watanabe Floral, Inc" | "Dakine"

I understand this is due to it still being in array format so I tried:

{{[0] => ({ label:, value: })) }}

and still get a blank output... it seems to be picking up the data find but having trouble getting it into the dropdown menu.

Only option I was thinking I have left is having a JS transformer, having the data sent to a table then running a SQL query on said table.

I've spent hours on this! I am at a bit of a lost, your time and consideration in helping me will be GREATLY appreciated!

Thank you!!!

Hey @Kyler_Edginton,

You can change your data source to specify which level you want. E.g.


And then add as value and as label.

Also, I think your solution is also a correct one, but you need to map item to value and name to label. Without any data in the label field you will keep getting blank output.