Getting JSON information from API GET Request

[David57940]

Hi, I am very new to Retool. I am running a GET Request that returns an item in this format:

"results": [
{
"id": "6655",
"properties": {
"createdate": "2021-08-05T15:05:50.241Z",
"hs_lastmodifieddate": "2022-07-18T12:36:37.436Z",
"hs_object_id": "66345436555",
"name": "Company Name"
},
"createdAt": "2021-08-05T15:05:50.241Z",
"updatedAt": "2022-07-18T12:36:37.436Z",
"archived": false
},

I am trying to create a dropdown of all the "names" of the items returned so for instance I would only want this to show "Company Name" in the dropdown. I am confused how to do this. I have gotten query1.data.results to work but .properties and .name does not. What am I doing wrong and is there a good documentation page on this? I've been looking unsuccessfully.

[ScottR]

@David57940 Welcome to the forum!
I think it will depend on what you are returning from the source:
I took your data and added duplicated it adding Company Name 2 simply created an array for "results" and then populated the dropdown with the mapped items in the array:

You might do this differently because your query can be the Data source and not static like my example

[David57940]

@ScottR That makes sense with that logic when it's static, so all that I have to do is enable a transformer? I'm not quite sure I understand why it does not work when I have my API call as my data source. I apologize for my inexperience with this I'm just having issues finding good references to base my code on.

[ScottR]

Can you screenshot the api result and what you are naming the api (query1 or myApi)

so let's say you saved your API resource as myApi

you would then select myApi as the Data source for the Select dropdown component and then for label and value you would use something like {{myApi.data.results.properties.name}}
You should not need a transformer - you should be able to access your api payload directly within the Select dropdown component

[David57940]

It says my data source is empty (which it isn't based off the response) so for some reason it cannot be converted into an array?

[ScottR]

My apologies I didn't write the correct code for the value and label in the select component, so see below:

So here is what I have done:

As I said I used a transformer to replicate your payload

var somedata = 
 { 
   results: [
{
"id": "6655",
"properties": {
"createdate": "2021-08-05T15:05:50.241Z",
"hs_lastmodifieddate": "2022-07-18T12:36:37.436Z",
"hs_object_id": "66345436555",
"name": "Company Name"
},
"createdAt": "2021-08-05T15:05:50.241Z",
"updatedAt": "2022-07-18T12:36:37.436Z",
"archived": false
},
  {
"id": "6655",
"properties": {
"createdate": "2021-08-05T15:05:50.241Z",
"hs_lastmodifieddate": "2022-07-18T12:36:37.436Z",
"hs_object_id": "66345436555",
"name": "Company Name 2"
},
"createdAt": "2021-08-05T15:05:50.241Z",
"updatedAt": "2022-07-18T12:36:37.436Z",
"archived": false
}
   ]
 }
return somedata

Then I added for value and label in the Select dropdown
{{item.results.properties.name}}

[David57940]

Hey sorry @ScottR, I've been taking a JavaScript course because this has been such a mess.
I am still unable to get the options into the select component. Something I found interesting is I can get a specific name into a text component using this syntax:

{{ query_HubSpot.data.results['0'].properties.name }}

But when I do

{{ query_HubSpot.data.results.properties.name }}

the result is null.

[David57940]

Never mind, I got it to work by formatting my data as an array in the transformer. Thank you!

[ScottR]

Woot - glad to hear it!