Search TextInput from API GET response

Hi, First day working with Retool. I've seen a few videos that make this look rather simple but are mostly using a connection to a Postgres DB which I'm not looking to do. I have a REST endpoint that I've added and I've populated the response to a table. I was hoping to do a search like you could for the Postgres DB. You're allowed to query the database directly and use {{Textinput.value}} in your query. I want to simulate the same thing but search through my API response and display the value on my table after the search. Is there any documentation for this or can anyone point me in the right direction? Here is the Youtube video from Retool as a reference:

Hi Aldo! This should definitely be possible. Would you mind sharing your current query and search input setup?

Does your current API accept search inputs? Are you attempting to set up fuzzy searching? If your API doesn’t accept search inputs or if you’d like to set up fuzzy searching, I’d recommend using this special query type https://docs.retool.com/docs/querying-via-sql

It lets you write SQL against your REST API output!

And here’s some syntax that should help: https://docs.retool.com/docs/sql-cheatsheet#show-all-data-when-a-filter-is-not-in-use

Hi Victoria,

Thanks for responding!

I created the Resource called "Query JSON with SQL" and have the following query:
select * from {{get_vas.data}} where 'slug' like {{'%' + textInput1.value + '%'}}

but the query does not pull anything. This is {{get_vas.data}}:

{
    "request": {
      "url": "https://blah",
      "method": "GET",
      "body": null,
      "headers": {
        "User-Agent": "Retool/2.0 (+https://docs.tryretool.com/docs/apis)",
        "ot-baggage-requestId": "undefined"
      }
    },
    "response": {
      "data": [
        {
          "Name": "Friday",
          "slug": "random",
          "Thing": "box"
        },
        {
          "Name": "Tuesday",
          "slug": "name",
          "Thing": "sticker"
        }
      ],
      "headers": {
        "content-length": [
          "2"
        ],
        "content-type": [
          "application/json"
        ]
      },
      "status": 200,
      "statusText": "OK"
    }
  }

When I remove the where 'slug' like {{'%' + textInput1.value + '%'} I can see all the data pull, but once I add where 'slug' like {{'%' + textInput1.value + '%'} nothing comes up. I've checked that textInput1.value has the right information by checking the component's state. It seems as if I can target 'slug'. I've looked through the documentation and tried several different syntaxes but with no success. Can you provide any additional input to pull in the slug value as I type it?

Hey Aldo! I'm glad the query at least works when you don't have the additional condition.

It sounds like you may need to follow this doc to take care of the case when there's nothing entered in your textInput component.

select * from {{get_vas.data}} where ({{!textInput.value}} or 'slug' like {{'%' + textInput1.value + '%'}})

Does that work for you?

Hi Victoria,

This indeed works, I can hover over the textInput.value when I configure the query and see the correct information, but when I search in the table, the search does not return anything. I have run the query automatically when the input changes, but I don't see any changes as I enter some letters. Any idea why this is occurring?

Hmm I guess it’s not finding any matches. If

select * from {{get_vas.data}}

works, then it’s either a syntax issue or just a data issue. Would it be alright if I stepped into your app to take a look? If so, DM’ing me a link to your app would be perfect :pray:

Hi Victoria,

I'm trying to figure out a way to DM you but I'm not having any luck. I'm following the direction here:

But I can't locate the message icon when I click on your profile. This is what I see when I'm in your profile:

Let me know if I'm missing something here or should look elsewhere.

Thank you,

Aldo

Oh weird, thank you for letting me know! I’ll look into that.

Since you sent a link to your app earlier, I have the link now :slight_smile:

I’ll let you know as soon as I can login to your app and poke around.

Awesome, let me know what you find!

I am going through the same issue
I tried [ select * from {{table1.data}} where ({{!textInput1.value.value}} or 'slug' like {{'%' + textInput1.value + '%'}}) ]
but it won't show any data that matches within a table

@Aldo_Lambruschini, I just logged in!

First thought, your query is currently

select * from {{get_vas.data}} where ({{!textInput1.value}} or 'slug' like {{'%' + textInput1.value + '%'}})

but I think the column name (slug) can't have the quotation marks, so it should be more like

select * from {{get_vas.data}} where ({{!textInput1.value}} or slug like {{'%' + textInput1.value + '%'}})

Does that work for you? cc @Rohit_Deshmukh

Hi Victoria,

I was hoping you could help me with something else. I can't get for the life of me revert back dropdown value to it's default value after I click on a button. I set up a Javascript code to run after a button gets clicked to this:

const newItem = {
  field: fieldDropdownInput.value,
  type: TypeDropdownInput.value,
  operator: operatorDropdownInput.value,
  value: valueInputText.value,
};

const updatedItemList = [...itemList.value, newItem];
itemList.setValue(updatedItemList);
fieldDropdownInput.setValue(null);
// TypeDropdownInput.setInProps({ value: null });
// operatorDropdownInput.setInProps({ value: null });
// valueInputText.setValue("");
return updatedItemList;

You can see some of the things I've tried that are commented out, but I'm not having any success. What am I doing wrong here? Only the inputText field gets cleared but not the dropdowns

Hey Aldo!

In order to set a component to its default value, I think your best bet would be to try something like

component.reset() if the component has the reset option

Or

component.setValue("the default value")

You can run this code in a JS Query or script in an event handler, or you can "Control component" in your event handler and have it set the value of the component that way.

Let me know if that works for you!