Adding in dynamic tags via an array

[bsteiger]

I'm trying to use the tag component and loading it via a JSON Query via SQL where I'm pulling a list of labels.

You'll see I have in the tags. I have tried a number of different combinations and feeling stuck:

[{{forecast_sql_labels.data}}]

You'll see after I hover over, I see the that there are three elements. I'm just not sure where to go from here to show this in an array so the tags work.

Two other requests, each label is formatted like this:

Skill_Name

or 

Skill_Name_Name

Request 1: Is there a way to get rid of "Skill_" so it only shows Name or Name_Name, then...

Request 2: To change the _ to spaces. So Skill_Name would look like Name or Skill_Name_Name would read Name Name.

[jocen]

Hi @bsteiger

You should be mapping that Tags data, i.e.

{{forecast_sql_labels.data.map(x => x.name)}}

You don't need the [] brackets since the output is already an array.
As for the other two requests, you can use regex string manipulation on javascript to do the replacing, i.e.

{{forecast_sql_labels.data.map(x => x.name.replace("Skill_", "").replaceAll("_", " ")}}

You can either do the transformation on forecast_sql_labels query or directly on that {{}} for the tags data.

EDIT: Just plain string manipulation. There's no need for regex here as the first word and underscore are pretty static so just a straightforward replace function needed.

[bsteiger]

HI @jocen

Thank you for the prompt response. I may be bordering on idiot. I copied directly and pasted each of these individually to try and well, neither worked for me.

I'm assuming x => x.name should be used with something different?

[jocen]

@bsteiger it's still work hours for me so can reply this time around. lol

What do you mean something different? That's just basically telling the mapper to return the name property from each object of the data.

You should be using the second one since this is addressing all 3 of your requests:

{{forecast_sql_labels.data.map(x => x.name.replace("Skill_", "").replaceAll("_", " ")}}

[bsteiger]

Hi @jocen

Here's the error message after pasting this into the field:

[jocen]

Ahhh, sorry, @bsteiger, I didn't expect replaceAll wouldn't be a function available for retool. Replace replaceAll with just replace and that should work.

[bsteiger]

Aww.... it's working, but it was missing a parenthesis. A question, as I'm learning, what did you from map onward.

{{forecast_sql_labels.data.map(x => x.name.replace("Skill_", "").replaceAll("_", " "))}}

[jocen]

@bsteiger it's a javascript function to help you transform/process your iterables (array/list), which in this case your forecast_sql_labels. Map function returns an array.

• x being the parameter for the function (indicative of this => symbol) on how we are gonna do the transformation.
• x.name is the way to access the example you have, e.g. "Skill_Account_Management", etc.
• .replace(textBeingReplaced, textToReplace) as the name of the function itself, you change the value of the first parameter (textBeingReplaced) with the value of the second parameter (textToReplace).

Despite Retool being a low-code internal tool builder, I'd say there's a fair amount of programming knowledge required to navigate it. Hope my explanation made sense to you.