Putting a variable in a query in URL param with an object?

We are struggling to figure out how to add a variable to a URL param which in the shape of an object. The format of our query, needs to look like this: filter[q][metadata_jcont]={"first_name":firstName}

{"first_name":firstName} is the object and firstName is the variable.

However, we try to make firstName a variable by surrounding it with {{}}, like so,
filter[q][metadata_jcont]={"first_name":{{firstName}}}

we get an error, because the object itself has {}. So how do we format this so that the firstName can be passed a variable?

Try something like this {{encodeURIComponent('{"first_name":' + firstName + '}')}}

This will encode the string - you need to make sure you are decoding on the other end.

The other option is to set the content-type header to application\json and set the request body as {"first_name":firstName}. If this is an API it may likely support JSON in the body of the request as passing json on the url is not an easy thing to do.

Thanks. We tried setting the JSON in the request body, but the key is: filter[q][metadata_jcont], so how can we then set the value as {"first_name":firstName}, as this is key/value pair already?

Ah!

To just get the string try {{'filter[q][metadata_jcont]={"first_name":' + firstName + '}'}}. Basically string concatenate with {{}} vs embedding the {{}} in a string.

Does this help?

I will try and let you know. I don't understand what you by putting the string, b/c JSON requires a key and value. What is the key in the string? It is just one big string and if I surround it with {{}}, the whole thing becomes a variable, which is not correct. The key is: filter[q][metadata_jcont]

Yeah, so none of these worked for us. Encode component just throws an error. JSON body, no clue how to set this up. JSON requires a Key/Value, so we can't just provide a string. Isn't there a way of escaping the {{}}? And either way, we can't pass the value via a JSON body, it needs to be part of the URL params per the API specs. Is there no way to pass a variable via the query param? The problem is that the Retool variable uses {{}} for variables, but this is the same syntax used for an object. Obviously, I dno't expect Retool to change their variable notation, but it's a bit strange. Why doesn't Retool support classic JS syntax of ${}, which you can easily escape with ``. How do you escapes the {{}}?

When we try the code above, the URL just contains the value of firstName, and the object itself is not passed, the URL doesn't contact the actual object we need which is: {"first_name":{{firstName}}}, what happens it the URL just contains the variable and eliminates the key from the object.

I am sorry that I have confused things.

What exactly should be sent on the URL?
https://foo.com?filter[q][metadata_jcont]={"first_name":"David"}

Any link to your API would help.

Also messing around I was able to get filter[q][metadata_jcont]={"first_name":{{firstName}} } to not throw an error - notice the space between the last '}} }'

The API here: Filtering data | Getting started | Core. We've been able to filter everything in Retool correctly, aside from metadata. The URL requires, filter[q][customer_metadata_jcont]={"first_name":"David"} . If we use a constant, it works fine, but including a variable in with {{}} in Retool doesn't work. There doesn't seem to be any way to pass a variable to an object in Retool because the {{}} is misinterpreted. So this works fine: filter[q][customer_metadata_jcont]=={"first_name":"David"}, but if we then try to put in a variable like so: ={"first_name":{{firstName}} } it won't work at all. Tried everything.

The problem is that Retool's syntax for variables, {{}} conflicts with the basic object syntax in JS. It's odd that Retool doesn't just use ${} for variables. I think that would solve the issue, but of course would probably not be possible.

EDIT You space comment solved the issue! So this works: {"first_name":"{{firstName}}" } - the spacing here is critical. Also, you need to surround the variables with quotes.

1 Like