Send nested JSON with server-side API


#1

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.


How to get Json stored in Local Storage and show its full schema in wappler visual design app
How to submit multiple rows of a table with checkboxes
#2

@George Is this possible with Wappler at the moment? If not (yet) that’s fine too, but I’d like to know.


#3

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?


#4

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.


#5

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 } }}


#6

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?


#7

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?


#8

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.


#9

The JSON submit is the only step left, I just need to submit something to an external API.

But the flow is as folllows:

  1. User presses the blue “order” button on a table:

  2. The column values SKU and quantity (aanvullen) should be sent to an external API

  3. 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.


#10

OK now I understand what you mean :slight_smile:

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:

image

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.


Dynamically replace parts of JSON for server-side API action
#11

Btw the JSON Form fields naming is based on the W3C HTML JSON form submission draft:
https://darobin.github.io/formic/specs/json/


#12

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.