Hi all!
I need to make a call to an API where I change the data in the payload based on some conditions. I’m using a Run Javascript object to build the payload but it’s breaking when an input is empty. The code is this:
When the value is not empty I can see the output of both console.log()statements in the console. But when the value is empty I’m getting a syntax error in the assignment and no output at all.
How do you guys handle situations like this?
Thank you in advance!
At the bottom of that Run Javascript action, you will find the Conditionals box.
Just move your if statement to the conditional (“Only when…”) itself, and it should work. You’d need to make it backwards though, and make the conditional Input Percentage's value is not empty
The problem is that my screenshot is a simplified version of the actual logic. I have several if statements adding different attributes. The Only when allows only an if statement.
Ok, got it, in that case here is what I’d recommend:
That’s assuming that:
Alternatively, you could format the entire Javascript code based on if it’s empty, such as:
Aha, that was a great suggestion! Worked like a charm!
Thank you very much!
Building the payload works great, but now I’m wondering the best way to pass this payload to an API call. Any idea?
I take all of this back, but am going to leave it incase for whatever reason you need it. Use API connector. 100%. I didn’t see the full scope of what you were trying to do.
There are 2 ways to send the API call, either with fetch or with axios. I’ve used both, and if possible, I recommend utilizing axios.
You’d need to include their CDN to your page header:
Here is the url to minified version (which should work for a simple POST request):
https://cdnjs.cloudflare.com/ajax/libs/axios/1.7.2/axios.min.js
The hard part is what you are going to do with the returned data. You may want to consider building out a plugin for what you’re trying to accomplish, so you can have referenceable fields. If you’re just trying to do a POST request with no returned data this should work, but if you want to be able get returned data and reference that data in new actions, as far as I know only a plugin can do that.
Here is Axios’ documentation:
https://axios-http.com/docs/intro
Here is an example POST call with Axios:
axios.post('https://jsonplaceholder.typicode.com/posts', {
title: 'foo',
body: 'bar',
userId: 1
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
});```Why not to use Bubble function and API Connector?
Your script seem very simple for something that Bubble can already do…
My only concern with an API connector is that there seems to be variable properties of the data object. After I typed this, I did some searching. Totally possible.
I’ve never had a situation where I needed to do this, but I found this topic which may help OP:
Hi @draked123!
Thank you for the help! I’ve ended up using the substitution of the entire payload as suggested in that link. So basically the flow is, build the payload in a Run Javascript → call a bubble_fx_[function] in the javascript code that triggers a bubble event → Listen for that event and use the payload in the API call.
Thank you again!