POST request with dynamic parameter (limit) in body

[Tanguy]

Hi Community,

First, thank you everyone for the creating and using such an amazing tool !

I am trying to make an api call with the POST method. The endpoint I am connecting to is requesting parameters in the body.
The request is working fine:

I also can display the data on my Inventory page with a Bootstrap table:

Here is my problem: Instead of setting the limit at 2, I would like to change it to a dynamic value. I created a dropdown list, where I am hoping to change this "limit", then refresh the page or reload the ServerAction (with the new limit). Here is the dropdownlist:

When I open the Server Data Binding on my API Action, these are the value I can select dynamically:

How can I create a variable that appears on the dynamic picker that is changed by my client-side dropdown list?
As you probably understood, the purpose is just to change the number of rows displayed on the table.

I hope that the amount of context is good and my question is clear.

Thank you !

[famousmag]

Hey @Tanguy , welcome to our community.

How about adding a $_GET input parameter in your api and set the limit in your api json data to that value instead of a static number (2) ?

And in your page's servervonnect input oarameter bind the dropdown's selected value

[Tanguy]

Hi @famousmag , thank you.

Here is how I created the $_GET variable:

Just a note, I need to add the double " manually around the {{$_GET.limit}}. Otherwise I get an error. Is that the correct way to add this dynamic value?

Back to the page, I do have an input parameter now, but don't see this value in the dynamic input:

Moreover, if I write a static 2 in the input parameter field, the table is not displaying anything:

I am confused why it does not behave the same that writing a static 2 in the Json body itself.

Thanks.

[Apple]

Using dynamic JSON is one of those things that every Wappler that tried it failed at first attempt.

Use a service like Mockbin.io to create a mock endpoint and set the API Action URL to that mock endpoint. This will allow you to see how/if Wappler is sending the limit variable correctly to the remote service.

Personally I use the Group step with Set Value(s) inside to build a JSON, and then I select that Group variable for the JSON body field.

[bpj]

Because of how Wappler parses the dynamic bindings you have to encapsulate them in quotes. What this means is that values are sent as strings. Could it be that the API endpoint you are calling is rejecting a string when it expects a number?

[bpj]

Have you tried setting the data type to auto and using the Input Data section at the bottom of the API step in Server Connect?

[Tanguy]

Hi @bpj
I tried that, with a POST method instead I am getting an error when I run the request on the browser:
{"errors":[{"category":"INVALID_REQUEST_ERROR","code":"BAD_REQUEST","detail":"invalid character 'l' looking for beginning of value (line 1, character 1)"}]}

Here is the code editor of the request:

The first part of the code seems to be the error. It is added by Wappler when I create the $GET variable. I don't really know what to conclude with that error.

Thanks!

[Tanguy]

@bpj I made some progress. I tried with another parameter "sort_order" which is a string, not a integer (from API doc). Auto is giving an error but using Data Type as Json is working :

On the page, I changed the dropdown menu. On-click changes the value of the input sort_order to either ASC or DESC and load the action:

And it is working perfectly !

So it means that my endpoint is refusing the limit as a string, thank you for suggesting that.
Is there a way to solve that in Wappler?

Also @Apple thank you for your reply. I will remember using a tool like that. I don't really understand how to use Group step Set Value to built a JSON. Would you have more detail on that please?

[bpj]

When you send the value to your own SC endpoint as GET limit, it will be interpreted as a string. Use the input parameters as I suggested above but make the value $_GET.limit*1 that should make it a number

As it is a post endpoint, you could also try using the form data, rather than input data bit

Just to demonstrate your GET being interpreted as string:

visited as page with getlimit sent as 20

gives

as you can see it is encapsulated as a string