How to loop through an array and hit an API for each value in a column

Hi all!
Newbie here. I'm stuck with something and hope I can get help here. I'm trying to accomplish something similar to this but don't know javascript well and I'm out of my prep :pleading_face:

I have a table with a list of names and phone numbers connected to a gsheet with a button that triggers a Twilio Studio via API (each individual flow has its own rest API url, like: . I need the button to behave in such a way that takes the array of phone numbers and triggers the Twilio Studio API one by one, basically a loop.

I used Integromat to do a prototype just to create this iteration of numbers in the array, but I think this functionality is possible directly in Retool with scripting, if I only knew how to code it.

Here's a screenshot of my beautiful dashboard

Thanks for any help!

1 Like

Hey @Veronica :slight_smile:

So the general format for this would look something like the below. Since the table is backed by a GSheets query, we’d just iterate through the query’s data directly instead of adding another layer of abstraction via the table. => query2.trigger(data))

The specifics depend on what that flow trigger looks like. Does each row in the table have to trigger a separate endpoint? Or send all the data at once?

Hi @Justin - thanks! To answer your question, each row in the table triggers the same endpoint (the Twilio flow), but they need to be processed one by one as Twilio only wants one number to text.
The second “tab” in my table is associate do a different Gsheet, which in turn is associated to a different Twilio flow, with its own endpoint. But all the numbers in the query need to trigger that endpoint, one by one, like the first one. Hope I made it clear!

@Veronica for sure. So does the endpoint have a param you can include that lets you pass through the number? The basic structure I’m thinking is:

  1. A query that hits the Twilio endpoint with a dynamic param for the number
  2. A Run JS Code query that iterates through your table’s data, and for each record, triggers query #1 and passes through additional scope with the phone number

Yes, the Twilio Studio API really has 3 parameters: SID, FROM, e TO:
Plus of course the authentication headers.

Gotcha @Veronica - so in short here's what I'd do:

1. Set up a query to hit the Twilio endpoint, and add in dynamic params for the TO field

If you have the Twilio endpoint already connected as a REST API resource, you can use that. I'm just using a generic REST query, and added From and To params. In the To one, I put in a variable (which we haven't defined yet – which is why it's red) called {{ dynamic_to }} - this is going to pull in the phone numbers from the table.

2. Create a Run JS Code query to iterate through the table data

Assuming your table is backed with some query like, we'll iterate through that and trigger that first Twilio query for each one. Using the additionalScope param, we're passing in each particular row's phone number, which is populating that dynamic_to variable that we put in the first query.

3. Hook up the Run JS Code query to a button

Or whatever component you want to use to run it.

LMK if this helps!


Thanks @Justin! I think I'm almost there but I have a stupid Q. Where do I put the authentication headers for Twilio? Basic Auth should work but I don't see any "authentication dropdown" in the REST API resource, like your documentation says.
See screenshot attached for my attempt, but Twilio complains (no authentication credentials provided)

Hi @Veronica,

Can you try changing AuthToken to Authorization? Also, if you haven't done this yet, you'll need to add the word "Basic" before your auth token.
It should read Authorization: "Basic twilioauthtokenherexxxxxxxx"

Hey Justin!
I had a similar issue and your solution is perfect and helped a lot!
However, the variable "dynamic_to" is not being passed to my API Query.
Would really appreciate some help on this.

Hi @Eklavya

Thanks for reaching out! Your query looks good :thinking: Can you check the console to see how dynamic_to is being sent to the query? It should look like this:

Just a reminder, the dynamic_to variable will always be red & undefined when viewing or triggering your Twilio query directly. It'll only get defined when you run the Javascript query

Hey @Tess !
Thank you so much for the quick response.
This is my console when I run the JS Code.

The variable appears to be undefined.
Could it be the ID of the column in my table that is not passing the phone number value?
If so, where can I find or add the correct column ID to use
Thank you

Hmm since it's coming from, can we see the data structure? Is it an array of objects?

Does every row have a value for .phoneNumber?

phone_list is a table that pulls information from a google sheets file via an API Query called list_numbers.
It has only one column called Phone Numbers and there are only 2 entries in the column at the moment.
That column has the id 'phoneNumber'
Does this screenshot help?
Thank you @Tess

Hi @Eklavya,

Is it possible that the column has a different value for the "source"? I think you need to reference the source instead of the id

That worked!
I referenced the API Query directly that I was using and the id of the row itself
Thank you so much @Tess

Wonderful! :tada: Thanks for including the screenshot in case others run into something similar!