How to use Javascript in bubble

Need help Plugins
1

I have an api response which I was not able to map properly within repeating group. I can write some javascript code and transform api response such that it will be directly consume in bubble.

So can anyone tell me how to call api with help of javascript code in bubble and write some code in it and return json response out of it. Like where in bubble can we write some function in javascript and how can we return json response out of it and then how to use this json in repeating group.

1 Like
2

Hi @abhishek :wave:

To write javascript you need toolbox plugin…

This the bubble editor of toolbox plugin where you can find various examples of javascript used in bubble…

Screenshot 2022-08-28 at 18.14.36
Screenshot 2022-08-28 at 18.14.36668Ă—585 47.5 KB

2 Likes
3

Hi @viquarahmed07 Thank you for your response. It worked to some extent but due to additional layer of object list i was not able to parse data.

4

Basically I will be writing javascript code where i will call api using async await function, axios for request, and returned json list

5

@abhishek well i am not sure regarding doing complex things in bubble using javascript…

6

Plugins are a more structured way of bringing a codebase into your app.
For what you’re trying to do I would recommend switching over. Lots written on the forum already to get you started, or you can fork any free plugin and study the syntax that way.

For returning your object you’ve got a few options:

  • The simplest route is to the flatten the object into a one-dimensional array. At it’s simplest this would just be a list of strings / numbers / another type. But you can go deeper by adding multiple data points into each item using a / or similar to separate them. You then bring that array up into Bubble via publishState() and you can then sift, sort, split it.
  • If you really want your object as it is up in Bubble this can also be achieved. This is just as you’re envisaging and once it’s up there though you can traverse the object perfectly - however it’s fiddly to get started. The best place to learn is via this thread. This works both client and server side.
  • Alternatively, just use the API Connector to make your calls for you? That keeps everything in vanilla Bubble and returns your object in a Bubble-ready schema ready to work with.
2 Likes
7

Hi @exception-rambler . Thank you for your suggestions. I tried creating plugins. Inside this javascript code I am trying to create flat list similar to this json using javascript code in plugin.
[
{
_p_name : “abc”,
_p_vital1 : 45,
_p_vital2:46
},
{
_p_name : “def”,
_p_vital1 : 88,
_p_vital2:89
}
]

I wrote code for same using async await function and also used axios for request where I am calling api inside function and and transforming json what bubble repeating group need (Ex json shared above) . But that code is sending me empty data. How can we write code using axios and async await.

8

Are you client or server side?

9

server side because on server side node modules can be added

10

Axios is great, but in Bubble I would recommend using the pre-wrapped request method that comes as part of the plugin API. Take a read of the documentation for server side plugin actions here. It says:

Note: When writing server-side actions, avoid using async/await syntax to wait for promises. The framework we use to to handle asynchronous code (notably used in context.async or context.request ) relies on a special library called “Fibers”, which works very differently from usual promises and will cause unexpected behavior if async/await is used. Consider using the traditional Promise.then/catch syntax instead, which is supported by Fibers.

So you should use context.request() which takes the same arguments as the npm request module here along the lines of the following:

    let options = {

        uri: `api-service.com/endpointUrl`,
        method: “post”,
        headers: {

            Authorization: `Bearer *your_token_here*`

        },
       body: {some object here}
        json: true
    };

    let response = context.request(options);
    return {response_string: response.body.response.text};

And finally - because the rabbit hole always goes deeper - revisit whether you really need to do things this way, or whether you can achieve what you need using the native Bubble toolset.

11

@abhishek:

You can find in this tutorial how to use it:

1 Like
12

Thanks @hafizaliimrankhan. It helped me a lot.

1 Like
13

Thank you @exception-rambler . This approach was very clean and easy to implement.