Hi,
I need help on how to pass an array of objects to a server connect.
I'm using Wappler 6.3.3 and the PHP server model.
I have a page that needs to pass an array of objects to the back end. I am using a wappler server connect component, NOT the Server Connect Form component. I understand that the Server Connect component that I am using will pass the parameters as part of the URL of the server action.
I have the array of objects in the page called arrAccepted, and I can see that it is properly loaded with data.
The server action has the input > GET defined. I call it days_accepted and
it is defined as follows:
In the page, when I populate the arguments to the server connect that will invoke the server action expecting the array of objects, I pass the arrAccepted.items. The code looks like this (it is part of the full calendar)
dmx-on:dateclick="scProcessCalendarDate.load({mydate: $event.date, days_accepted: arrAccepted.items, ...
The problem is that the array is passed to the server connect as
[object Object], [object Object], [object Object], ...
I think that I have to add an operator to the arrAccepted.items but I don't know how to do that and what needs to be done on the server side.
Can someone help me?
Many thanks in advance!!!
Alex
Thank you Francisco, but the example uses a POST, not a GET. There is no form in my page and as said, the (plain) server connect --i.e., the one that is not Server Connect Form-- only allows parameters passed as part of the URL.
I thought that one had to "stringify" the JSON array before passing it as a parameter. Since I'm not a programmer, I don't know what that means or how to achieve it, and also I don't know how to massage the "stringified" array in a server action.
Help is really really welcome!
Alex
You could just add a serverconnect form in your page with hidden inputs according to your needs.
Then on calendar click.event, set the values of the hidden inputs (from your calendar) and submit the form.
*You have to remove the $_GET variables and replace them with the $_POST ones...
I have done it in similar cases and works fine...
3 Likes
I can’t remember which version of Wappler this was added to but you might need to update to a more recent version. Have a look at May’s Wappler Meetup where a demo is shown of the new Form Data component which makes light work of this.
Yes, to pass an array of objects to a server action via GET, it is necessary to process the object to a string form, most typically JSON.
While i have never done this personally i assume you will then need to JSON.parse() the parameter to return it to the array of objects.
Be aware that there may be issues with string limits. While servers will often support strings of several megabytes, browsers typically only support around 2k characters as a parameter max length.
If you can do it, i recommend you use POST rather than GET as @famousmag indicates.
1 Like
Yeah Master!! From the first things learnt in this community and Yours and @ben's tutorials.
$_GET method is for certain occasions
1 Like
Hi!
Thank you all for the suggestions. I tried following what @famousmag pointed, which makes total sense to me, but I'm still having problems.
This is what I did:
- I changed the back end to accept the parameters as POST instead of GETs. It now looks like this:
- On the front end, I created a server connect form and added to it the hidden variables. It looks like this:
- On the calendar widget, I added a dynamic event for Date Click.
The code looks like this:
This is what I observe:
When I run this page and click on a date, I can see that the payload sent to the server action invoked by the server connect (which is called ProcessCalendarDate) receives the hidMyDate variable properly but the hidAccepted parameter receives what looks like a string made of "[object Object], [object Object], ... elements.
This is pretty much what I was getting when passing the array as a GET parameter.
I'm also sure that I'm not the first one who needs to pass an array of objects to the back end for processing, so I know that this must have a solution.
I'm almost sure that the problem is in the way I configured the value of the hidden variable hidAccepted in the form. This variable is the one supposed to take the array of objects already loaded in the array arrAccepted elsewhere in the page. I know that this arrAccepted is properly loaded, because I display it in the calendar widget and it shows all the proper data.
I've spent hours trying different ways of doing the same and either I send nothing to the server action or I send this [object Object] thing.
I know I'm doing something wrong, but I don't know what and where, so any pointers on how to fix this will be really appreciated.
Many thanks in advance!!
Alex
Hey @aschoijett,
We were talking about simple inputs., not Array of Objects...
Sorry didn't understand what kind of content you are trying to pass to the backend.
Here is what I tried to do and work fine up to a certain point:
I've just set-up 1 of the 3 variables inside the arrAccepted array you have...
You can work the same way for the rest
<div class="container mt-4">
<dmx-array id="arr2" dmx-bind:items="srvc_getAllUsers.data.qr_gtUsrs.values(`usr_Fname`)"></dmx-array>
// here is a simulation to take an array of values (the usr_Fname columns of my serverconnect)
<form id="form2" method="post" is="dmx-serverconnect-form" action="/api/test/test_hash">
// I added an EMPTY formrepeat so I can pass all the values of the array when the button is clicked
<div is="dmx-form-repeat" id="arrAccepted">
// I added an input with id and name of "title" (your second variable inside the array)
// and set its value to the arr2[$index]
// be aware of the dmx-bind:id="'text2'+$index"
<input id="title" dmx-bind:id="'text2'+$index" name="title" type="hidden" dmx-bind:value="arr2.items[$index]">
</div>
// when btn4 (your calendar button) is clicked I run an inline flow with a repeat based
// on arr2.items and JUST ADD an item to the formRepeat
<button id="btn4" class="btn" dmx-on:click="run({repeat:{repeat:`arr2.items`,outputFields:[],exec:{steps:{run:{action:`arrAccepted.add()`,outputType:'text'}}},name:'repeat',output:true,outputType:'array'}})">Set values</button>
<button id="btn5" class="btn float-end btn-primary" type="submit">SEND</button>
</form>
</div>
And the backend:
Browser:
-
the array (from the serverconnect) has values (like your calendar)
-
button clicked and the formrepeat is filled with the array values
-
Response when the form is submitted (when your calendar button is clicked)
Tell me if you understand what I did...
Thank you, Tasos, for all your help, and to all other folks in this great forum for chiming in when someone needs help.
Since I am trying really hard to remove as much complexity as possible from the frontend, in the end I followed a slightly different path, synthesizing much of what was suggested in this thread.
Below is what I did:
-
I bit the bullet, and upgraded my Wappler to 6.6.1, which gave me access to the Form Data component. I did not have that component before, and that created the need for an approach like the one that suggested by Tasos.
-
Created Data Stores for the Calendar Sources, and populated them using a plain server connect that is fired when the page loads. This creates the array of objects that I need to paint the calendar.
-
Created a Server Connect Form that would be fired on the event of the user clicking on a date. This Server Connect Form is the one that will invoke the back end server action that I need to process the dates.
-
Under that Server Connect Form, I added Form Data components, setting their Data properties to be the Data Stores' data property. This is to pass my arrays of complex objects to the back end.
-
Configured the calendar's Dynamic Events portion, setting the Date Click event to fire the Server Connect Form.
Now, when I click on a calendar day, the Server Connect Form is fired, and I can see in the browser's Dev Tools that the arrays of objects stored in the Data Stores are properly passed to the backend, i.e., not the [object Object] strings as in the past.
I'm documenting this in case others need to go through a similar experience, in the hopes that it will save them some time.
Many thanks again for all your help,
Alex
3 Likes
Glad you got it working mate!
Just to make things right:
I didn't suggest the form data solution, credits on @franse and @sitestreet that suggested it.
I avoided that because DataStore's values can be manipulated on dev console
I didn't know how sensitive data you send to the backend and how would you handled them there...
So, now you ended-up going that way, make sure to check in your serverAction the data sent from the DataStore before you process them .
(I apologize if I talk too much or saying things you already know... I just needed to say them)
Cheers 
3 Likes
Pls don't assume that I know these things. You'll be wrong most of the time! 
Would the same security issue that you mention appear if I used arrays in the front end instead of data stores?
Thx!
almost same thing I suppose...
You didn't even had in mind using a POST method and you send variables straight forword as a serveraction parameters...
Forgive if I'm wrong buddy!
But I could use that way (and I have done it) in an restricted administration area that me and only me would trigger the serveraction
Keep in mind that anything on the frontend can be manipulated. That might be data store (local storage), cookies, form fields, etc. So the key is to have a way of checking that the data posted from the frontend (app connect) is untampered with by comparing it with data in the backend (server connect).
2 Likes
