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

Self Hosted Retool
, ,
1

{
"ai_tags": {
"add_link": "www.xyz.com",
"bucket": "news",
"categories": [
"web3",
"a",
"b"
],
"description": "test-desc",
"keywords": "tag1,tag2,tag3",
"sensitive_content": "no",
"video_title": "vid_xyz"
},
"vid_link": "https://media.begenuin.com/temp_video/.mp4"
}

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

2

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.
image

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

1534×842 93.9 KB

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

1 Like
3

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.

4

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:

{"results":[
{"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},{object3}...]}

{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?

5

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

6

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?

7

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

https://docs.retool.com/docs/transformers

http://community.retool.com/t/api-transformer-sql-query/13485/5

9

Hello,
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?
10

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
test.json

11

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

12

Hey, @ugo.ago I have a weblink like this:

It plays the video on the web but does not play the video in Retool's Video Player! Can you help me with that!?

13

Hello @Devarsh_Sheth,

I hope this message finds you well.


the reason for this not playing is that the file format is not supported by the component. It's a blob file

While we're always happy to assist with any questions or concerns you may have, I'd like to kindly remind you that it's best to open a new thread for an unrelated question or issue encountered.

Opening a new thread will allow us to better track and address your specific needs quickly.

It also helps us ensure that your questions are answered thoroughly and accurately and users who have encountered your issue can help out.