How to use image indexing inside transformer?

App Building
1

I have different URLs, some of them need to be concatenated, some not. I choose Image Source: URL, I wrote a transformer to manipulate these URLs:

const url = {{selected_hotel.value.images_arr[i]}};
if (url.startsWith("http")) {
  return url;
} else {
  return "http://photos.hotelbeds.com/giata/"+url;
}

The transformer captures i variable and have the same value always, I call transformer like {{giataManipulateTransformer.value}} and all images are the same. If I do it without transformer http://photos.hotelbeds.com/giata/{{selected_hotel.value.images_arr[i]}} I will get correct images, but can't manipulate these URLs. Can I pass something like argument into transformer to decide whether I should add a prefix to a URL or no?

2

Perhaps you could skip the transformer entirely and use the array map function to create the corrected URL for each image in the array?

something like:

{{ selected_hotel.value.images_arr.map((x) => {return {...x, url: x.url.startsWith('http') ? url : 'http://photos.hotelbeds.com/giata/'+url } } ) }}
3

I think the issue is actually how you're using the transformer:

The return value from the transformer you write becomes the value of yourQuery.data in the rest of the app.
source: retool docs

this tells me the transformer should return the same type as the original data, which you can see from their example here

const data = {{query1.data}}
return data.map(x => x + 1)

from the code you've provided you're only returning 1 url instead of an array. basically, you're using the transformer as if it gets called once for every item, when instead it's called once per query trigger.

the solution is based off @dcartlidge's post w all the hard work done for me already =) so if this works I'd suggest marking his reply as the solution since all I really did was explain a bit and add return to his code but :person_shrugging: it's up to you.

change your transformer to:

return {{ selected_hotel.value.images_arr.map((x) => {return {...x, url: x.url.startsWith('http') ? url : 'http://photos.hotelbeds.com/giata/'+url } } ) }}

if you prefer the longform or using forEach for whatever reason:

const result = [];
{{ selected_hotel.value.images_arr.forEach((arrayItem) => {
  if (arrayItem.startsWith("http")) {
    result.push(arrayItem);
  }
  else {
    result.push("http://photos.hotelbeds.com/giata/" + arrayItem);
  }
}) }};
return result;

personally, I'd suggest using .map() instead of .forEach() as the later has overhead that can otherwise be avoided