Transform data from an API call before feeding an element

Need help APIs
1

Hi all!

Would anyone know how data loaded by an API call can be processed with custom code, functions, formula… ideally in JavaScript, otherwise something very flexible, before being used by an element?

Let’s say I’m loading data from an API that’s not in the format expected by an element (e.g. a chart element), but contains everything I need. If possible, I’d like to avoid proxying the data through another API just to transform it.

How can I transform it? Map, process… whatever makes my data in the format expected by the element.

Having some JavaScript code in a plugin is fine, but the API calls section is only pure configuration, there is no JavaScript we can add to transform it (it would be a great feature to add!). Or, when using this data in the properties panel of my element, having a way to input custom JS would work as well, but I haven’t found an equivalent.

To illustrate, let’s say I want to apply below data transformation: a JSON.parse + map all values of an object.

// API response with raw data I need to format
let apiResponse = {
  description: 'this is a lowercase sentence.',
  raw: '{"a":1,"b":2,"c":3}'
};

// Process the data
apiResponse.description = capitalize(apiResponse.description);
apiResponse.parsed = JSON.parse(apiResponse.raw);
for (const [key, value] of Object.entries(apiResponse.parsed)) {
  apiResponse.parsed[key] = value ** 2;
}

console.log(apiResponse);
// Output:
// {
//   description:"This is a lowercase sentence.",
//   raw:"{"a":1,"b":2,"c":3}",
//   parsed: {
//     a:1,
//     b:4,
//     c:9
//   }
// }

Thanks a lot!

1 Like
2

To clarify my request, here is a sample app with:

  • A chart OK getting data from an API with the right format
  • A chart KO getting data from an API with the wrong format (dynamic dictionary, even not detected well in the API Connector). This data needs to be transformed, ideally in Bubble, before it can be used by the chart.
3

The free Toolbox plugin has several free javascript actions/elements (run javascript, javascript to bubble, expression) which might give you what you need.

Stuck on your bubble app? Reach out to us at https://protomakr.bubbleapps.io/

4

Nice trick! While using those tools as is is going to be quite hard for my usecase (I was unable to use the “Expression” tool and use another data source in the expression), using the element as the data transformer is doing the job. The element takes data sources (like API as input) and expose the output as another data source. This is what I need :slight_smile:

So in my case, it seems I’ll need to make a plugin that will contain an element with the custom processing I need.

Thanks for the lead!

PS: anyway, the Expression tool must be used carefully, it’s doing an “eval”, which should be avoided with external data to prevent security flaws. I was trying to use an external API, which can be considered external and unsafe. :slight_smile:

2 Likes
5

Hello @antoine_ol

Were you able to solve this?

Having the same problem at the moment.

Thanks

1 Like