Call external API construct complex JSON Body

Need help APIs
1

Hi,

I am trying to call an external API (typeform). So far I tried to call typeform using the API connector.

The problem I am facing is that the structure of the body for the API call can be very complex. The default way of providing a template body and using parameters is not sufficiently flexible for my use case.

I am trying therefore to create this body structure using Javascript. Problem I am facing is that I cannot find a way to have a javascript creating as output a JSON object and having his JSON object being used as the body of the API call.

Any help would be very much welcome !

Hugues

2

you can build json as text and use the text in the API Connector.

But if you can explain more which endpoint you need to reach and an example of the json expected, this will be easier to help.

1 Like
3

Hi Jici,

Thanks for your answer :slightly_smiling_face:

In order to test, I am trying to insert the following body in the API call :

{ ā€œtitleā€: "This is an example form " }

I. Test 1

If I put the JSON object as such in the API call it works

Capture dā€™eĢcran 2020-03-01 aĢ€ 21.34.45
Capture dā€™eĢcran 2020-03-01 aĢ€ 21.34.45666Ɨ502 23 KB

II. Test2

The Test2 works as follows :

  • A javascript creates a text :

bodyJSON = {ā€œtitleā€:ā€œTest2ā€}
bodyText=JSON.stringify(bodyJSON)
bubble_fn_newForm(bodyText);

But typeform is rejecting the request, see error message attached

Capture dā€™eĢcran 2020-03-01 aĢ€ 21.25.29
Capture dā€™eĢcran 2020-03-01 aĢ€ 21.25.29856Ɨ370 29 KB

==> My conclusion is that the problem is that in the case of Test2, it is not a JSON object that is submitted to the API (typeform) but text.

Any help very much welcome,

Hugues

4

Can you provide a screenshot of your API Connector?

5

Hi Jici,

Here is the screenshot of the API connector

Capture dā€™eĢcran 2020-03-01 aĢ€ 21.39.12
Capture dā€™eĢcran 2020-03-01 aĢ€ 21.39.121582Ɨ980 74.9 KB

Thanks,

Hugues

6

Add in headers, Content-type with value to application/json

Just to be sure, I suggest you to create a requestbin (https://requestbin.com/)
and send the request there just to see what is received.
If you make it public, you can share the link and have a look too.

3 Likes
7

Hi Jici,

Content-type is already defined as application/json. When I hardcode a JSON object in the body, it works fine.

Problem comes when I try to generate the JSON using Javascript. Problem I think is that the Javascript cannot communicate directly with the API call and must go through a text element.

Will try requestbin, very good idea :slight_smile:

Thanks again for your help,

Hugues

1 Like
8

Is this what you have? Thereā€™s a small bug, in using a variable called test1 instead of bodyJSON

2 Likes
9

I agree with @mishav
Even if your output seem correct in the screenshot, you should check the js.

10

Hi Mishav,

Thanks for your feedback.

I did correct the code in the meantime as follows :slight_smile:

bodyJSON = {ā€œtitleā€:ā€œTest2ā€}
bodyText=JSON.stringify(bodyJSON)
bubble_fn_newForm(bodyText);

But still getting the same problem.

Hugues

11

Captain Obvious didnā€™t score this time, hahaa. Another possible problem is those funny slanting double quotes, Iā€™ll assume thatā€™s an artifact of this forum.

Perhaps it is a matter of timing? Bubble workflows are finicky with page elements, they tend to use the values as they are at the start of the workflow, even if the values change before the API call action.

12

Did you try the requestbin? Can you share the link so we can inspect it too?

1 Like
13

Hi Jici,

First of all, thanks so much for suggesting the use of requestbin, really good idea.

Using that tool I understood that the variable created by a Javascript just before the call to the API is not accessible.

So I created a flow where when the user clicks on a button, it triggers an event which fills a variable. Then when this variable changes it triggers another event. At that point the variable is visible.

Very happy to be able to continue using Bubble otherwise this one would have been a showstopper.

Thanks again Jici for your help :slight_smile:

Hugues

1 Like