How to add data from an API object to a table, using transformer or anything else

"ai_tags": {
"add_link": "",
"bucket": "news",
"categories": [
"description": "test-desc",
"keywords": "tag1,tag2,tag3",
"sensitive_content": "no",
"video_title": "vid_xyz"
"vid_link": ""

This is my Get API response, how can I add this to a custom table for my own use.

Hello @Devarsh_Sheth,

To get this working, you would need to enable the transform section of the resource you are using, and then format the result to be used within the table.

For data to be displayed within a table, it has to be in either of these formats

  1. An array of Objects e.g [ {"BMW" : 1000} , {"Tesla" : 2000} ]
  2. Object of Arrays. e.g { "Car" : ["BMW", "Tesla"], "miles" : [1000, 2000] }

Here is an example, I converted the data you sent me to an array of Objects

I have also attached a sample app here
testApp (1).json

Thanks a lot it was very helpful, I was stuck here from 2 days, I formatted the data into an array, but never enabled the resource API transformer option, so wasn't able to push the data.

Now I have a query for the same thing, if I take in a GET request from the API and it returns me a set of multiple objects, let's say like this:

{"vid_link" : "https://media.mp4",
"fields" : {
"bucket": "bucket_label",
"categories": ["category_label","sub_category_label","life_stage_label"],
"keywords": "word1,word2,word3",
"video_title": "string",
"description": "string",
"add_link": "string",
"sensitive_content": "string",
"video_source" : "Genuin",
"video_destination" : "string"

{object2} and {object3} has the same structure as above, so how do I push the values of different object in different rows?
Is it possible to use the same transformer for object2 and object3?

Yes, it will show up in different rows.

Just ensure that you have the right structure.

From what I see, it looks like you have array of Objects which would work fine

i.e [{object1}, {object2},{object3}]

these will all show up in different rows, just ensure that they have same keys in each object

Yeah it's like
{"results":[{object1}, {object2},{object3},.....]}
It has a main object in which it has an array of objects, so how will your transformer work?

so the "results" key has an array of Objects as your value.

This would work as columns in the table if the Objects contents are in the format of "Key" : "Value"

e.g {"Car" : "BMW", "Miles" : 1000, "Color" : "green"}

If this is not in this format, then you can use the transformer to format the data
The Transformer is JS Code

Here is documentation on transformers that would be of help

I was able to access the data and use your transformer for it, now what happens in my app is, the data that is loaded in the table:

  1. I select a row in the table and the data is loaded in a form, I edit the data and the edited data is sent to the API using a button.
  2. Now if I press that button, I want to delete that specific row that I used in the table, how would that be possible?

Hi @Devarsh_Sheth,

Retool does not have a native way to do this.

Here are ways you can achieve

  1. Re-run the query that generates the table after the edited data has been sent via API
  2. Another way to do this is to save the query data to a temporary state and then load the values from the temporary state to the table. Doing it this way, you can access the data and use some JS logic to remove/filter out the edited data.
  3. The third way is to use the setFilters Method in conjunction with a temporary state variable to hide these values.\

These articles would be helpful to you when doing this

Table Filter tooltip and operators table

Using setIn() to change a temp state variable

Add values to temporary state array

Here is a video and app of how I Implemented mine

Thank you for the solution @ugo.ago and the example for the same, it is perfectly what I need.