Send nested JSON with server-side API

[George]

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

[nevil]

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?

[George]

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?

[George]

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.

[nevil]

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.

[George]

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.

[George]

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

[nevil]

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.

[nevil]

@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?

[nevil]

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 ?

[patrick]

How are the fields for id and replenishment named?

Try naming them like purchase_order[items][][id] or purchase_order[items][0][id].

[nevil]

Ah yes the [0] worked, thanks!

[nevil]

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?

@Teodor

[mebeingken]

Hey Nevil,

Just went through something similar, so perhaps this thread will help:

Setting server side object variables

Success! "options": { "count": 500, "offset": 0, "account_ids": "{{queryGetAccounts.groupBy('account_id').keys()}}" } Thanks Patrick…very much appreciate your time on this.

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

[nevil]

Thanks for your help, but I’m not sure I understand what is explained in that topic. It seems that I have to manually edit files, and that is not why I’m using Wappler.

So I would like to ask the team how I can do this using the Wappler UI? @Teodor @George

[Teodor]

Hello Nevil,
The solution @mebeingken is what you need. You cannot do this through the UI, you have to edit the file to add the dynamic value there.

[nevil]

Yeah I figured it out already with some help. But can you please make it available through the UI in future versions?

[Teodor]

Probably it will be possible to improve this in the UI. George will take a look at it.