How do I submit a JSON with the server-side API action like this:
{
"purchase-order": {
"status": "OPEN",
"warehouse": "c955_330498075",
"variants": {
"vendor": "najel",
"replenishment": 1
}
}
}
Maybe it has something to do with the ‘add repeat’ action, but I’m not sure how to make that work.
Sending a ‘flat’ JSON is working fine.
@George Is this possible with Wappler at the moment? If not (yet) that’s fine too, but I’d like to know.
Yes you should be able to do it. Assign the sub JSON structure first to a variable and then, use that variable value for your flat JSON data
PS. Seems your Wappler subscription can not be charged and will be cancelled - are you having troubles with payments?
Yes I’m still deciding if I want to continue with Wappler, depending on how/if things work. That is why haven’t enabled auto-renew yet.
Based on your answer I have tried the following:
Is this the correct way of implementing it? The JSON (left of the picture) is not correct. See my desired JSON in my first post.
You should enter all JSON fields separately, just as with the flat.
So enter status, warehouse and variants - but assign the variants as value the variable you defined.
Make sure the variants variable has an object as value so something like:
{{ { "vendor": "najel", "replenishment": 1 } }}
I appreciate your help but I’m trying real hard to decode your words.
This is how I interpreted it:
Which produces this API response:
{
"purchase-order": "[object Object]",
"title": "hi"
}
It’s not actually passing anything to the $_POST object. Where am I going wrong?
I was just talking about the set variable variants and it’s value there should be the expression I gave you.
Why are you calling the form generator? Do you want to generate a form or something from all the json?
Could you describe your whole workflow of what are you trying to achieve?
From the users perspective - so what page does he sees whats on it, how the data flows so that you eventually want to submit to the API and what you want with the results. Step by step please.
The JSON submit is the only step left, I just need to submit something to an external API.
But the flow is as folllows:
User presses the blue "order" button on a table:
The column values SKU and quantity (aanvullen) should be sent to an external API
The external API is called Inventory Planner, it creates a purchase order in that application.
The format of the JSON string should be something like my first post:
{
"purchase-order": {
"status": "OPEN",
"warehouse": "c955_330498075",
"variants": {
"vendor": "najel",
"replenishment": 1
}
}
}
That's it.
Why are you calling the form generator?
That is the only way I know how to send data from client-side to server-side. If there is a better way to send data to that 'object' post field please let me know.
I was just talking about the set variable variants and it’s value there should be the expression I gave you.
I'm very sorry but I just don't understand that sentence, this is quite complicated for me.
Step by step please
If you could return the favor and step by step explain me what to do, I would appreciate that.
OK now I understand what you mean 
Well it is a bit tricky. As you have to submit your form with JSON like structure.
So just create your form with all the fields you want to post.
Then name the fields as needed to contain the nesting with brackets in their name, like:
purchase_order[variant][vendor]
You can do that for every input in your form, just in the form input property inspector.
Or in code, resulting in:
Then it is very important that you replicate the same structure in the server action, so the easies way is to link the page and its form and import it:
Then you will see the form, with its nested structure, under $_POST
In your API Action, you can not bind the purchase-order with the define $_POST.purchase_order
Note I used underscore in the inputs name like purchase_order to avoid limiting of the names in $_POST to contain the minus sign. - but as the eventual assigning goes to the right purchase-order it should be all fine
So hope you can follow this, it is a bit complicated, but once you get it it is easy.
Btw the JSON Form fields naming is based on the W3C HTML JSON form submission draft:
https://darobin.github.io/formic/specs/json/
Wow okay, that worked yes. Thank you!
I do think the UI can be somewhat simpler to achieve this, I would have never figured this out myself (also because it’s not in the docs afaik).
Also when I change the text input name to purchase_order[variant][vendor] for instance, the ID field of the text input is changed to inp_purchase_order[variant][vendor] even though before I have named the ID field to something else. So then I would have to rename it back to the old ID again. No big deal but might be relevant for you.
@George has anything been changed on the UI of wappler regarding this topic? Or is your tutorial still correct?
I thought I read in the release notes of a previous version that something has changed regarding this. But I might be wrong.
If it’s still the same, are you planning to make things easier in terms of the UI to achieve nested JSON?
One problem I just discovered. This is the output that the nested JSON should produce:
{
"purchase-order": {
"status": "OPEN",
"warehouse": "c955_330498075",
"reference": "Test123",
"vendor": "Natural Heroes",
"items": [{
"id": "c955_16848727684",
"replenishment": "2"
}]
}
}
Instead it produces this:
{
"purchase-order": {
"status": "OPEN",
"warehouse": "c955_330498075",
"reference": "Test123",
"vendor": "Natural Heroes",
"items": {
"id": "c955_16848727684",
"replenishment": "2"
}
}
}
So without the array in items substructure.
I have set the type of the field as an array:
But it still doesn’t give an array as output. Any idea how to achieve this @George or @Teodor ?
How are the fields for id and replenishment named?
Try naming them like purchase_order[items][][id] or purchase_order[items][0][id].
Ah yes the [0] worked, thanks!
Now my final question, I hope this is possbile.
I have just 2 steps in my server action, both API calls. But the response of api1 should be inserted into api2. Api2 has the nested JSON talked about above.
The input data has the post variable mentioned earlier: {{$_POST.purchase_order}}
Now, how do I insert the response of api1 into one of the childs of {{$_POST.purchase_order}} of api2?
Hey Nevil,
Just went through something similar, so perhaps this thread will help:
I was inserting from a db query instead of an api, but this might give you some ideas. I ended up opening the server action in the editor, and was able to enter in a nested array for an outbound api action.
--Ken