API returning valid json but Wappler can't handle text/string fields

[tbvgl]

I’m not sure if this is a bug or if I’m doing something wrong.
I’ve the latest stable version installed on an M1 Silicon and I’m using Node for this project. I’ve created a completely fresh project to make sure it has nothing to do with other components.

I’ve configured a server side API action

Wappler detects the message and email fields as text.

That’s the API response I’m getting:

{
    "api": {
        "status": 200,
        "headers": {
            "server": "nginx",
            "content-type": "application/json",
            "transfer-encoding": "chunked",
            "connection": "close",
            "vary": "Accept-Encoding",
            "cache-control": "no-cache, private",
            "date": "Wed, 30 Mar 2022 18:43:58 GMT",
            "x-ratelimit-endpoint-limit": "60",
            "x-ratelimit-endpoint-remaining": "58",
            "x-ratelimit-total-limit": "60",
            "x-ratelimit-total-remaining": "58",
            "phpdebugbar-id": "X3e1e75c6416c44b507cfb62ab81c5735",
            "access-control-allow-origin": "*",
            "x-frame-options": "SAMEORIGIN",
            "x-xss-protection": "1; mode=block",
            "x-content-type-options": "nosniff"
        },
        "data": {
            "message": "User with given email already exists. Reset password email has been sent.",
            "email": "tobi@vgl.marketing"
        }
    }
}

So the JSON doesn’t have any issues.

If I try to use the data -> message anywhere in the front end then I’m just seeing [[Object Object]] while the message field is a text.

Here is the data I’ve selected to display in a text field:

And here is what I’m seeing in the text field:

The API response in Chrome dev tools is formatted correctly.

[Teodor]

Hello, your API response is not an array but an object.

[tbvgl]

Thanks @Teodor

I’ve defined the api response as an object before as well as data

and message as text

So I’m not sure what I should change to an object. I didn’t define any array.

[Teodor]

That is what I am saying, your data is an object and not an array and that is the issue.
What is the expression used that returns [object Object]?

[tbvgl]

That’s the expression: serverconnect1.data.api.data.message

[patrick]

Change the expression to json(serverconnect1.data.api.data.message), that should output the data as a json string instead of [object Object and can help to debug the problem.

Also you can test the expression in the console of devtools, use dmx.parse("serverconnect1.data.api.data.message") to check the output.

[tbvgl]

Thanks @patrick! That was helpful.

So json(serverconnect1.data.api.data.message) showed

{"name":["The name field is required."],"email":["The email field is required."]}

while Wappler expects another response

{"message":"User with given email already exists. Reset password email has been sent.","email":"tobi@vgl.marketing"}

I’m seeing the right response in chrome dev tools which means that the server connect action got triggered multiple times. This is most likely to me being dumb and adding a Refresh Server Action after the API call

When I don’t do that then I’m not getting any output from the server connect action on the front end after triggering it by submitting a server connect form.

I have output checked in the API action:

What I’m trying to do:

1. Have the user submit their name and email
2. Trigger a server-side API workflow submitting the details (server-side because I can’t expose the API token)
3. Pass the response to the frontend
4. Use the response to dynamically show a modal depending on if the user already has an account or not

I tried passing the server connect output directly to a text field with and without live refresh enabled and setting it as a session variable as a dynamic event when the server connect action is done.

No success so far.

[patrick]

I think that you get different response depending on the error, the result you get is some validation error returned from the API. There is also a good change that the status returned is not 200 but 400 in that case.

Remove the Live Refresh with Sockets, I don’t think you’ll need that in this specific use-case.

[tbvgl]

Yeah, the api response returns a different value if there is a validation error. I tried to remove the Live Refresh before but then Server Connect doesn’t output anything in the front end while I can see the output in the chrome dev tools.

{
   "api":{
      "status":200,
      "headers":{
         "server":"nginx",
         "content-type":"application/json",
         "transfer-encoding":"chunked",
         "connection":"close",
         "vary":"Accept-Encoding",
         "cache-control":"no-cache, private",
         "date":"Thu, 31 Mar 2022 14:27:07 GMT",
         "x-ratelimit-endpoint-limit":"60",
         "x-ratelimit-endpoint-remaining":"59",
         "x-ratelimit-total-limit":"60",
         "x-ratelimit-total-remaining":"59",
         "phpdebugbar-id":"X57bcc486f8f4217c3f8f9a4a8ac89e63",
         "access-control-allow-origin":"*",
         "x-frame-options":"SAMEORIGIN",
         "x-xss-protection":"1; mode=block",
         "x-content-type-options":"nosniff"
      },
      "data":{
         "message":"New user successfully registered. Reset password email has been sent.",
         "email":"corekjhfslkjdfs8sd7f678sdf67@tobi.tools"
      }
   }
}

But the text field dmx-bind:value="'json('+serverconnect1.data.api.data.message+')

doesn’t show any output from server connect.

[patrick]

Serverconnect will not update data when there was an error, the action probably returns status 400 and serverconnect will then not update the data but if you get an invalid event when there where validation error, you can add an event listener to that event to display some useful information to the user.

If you use a Server Connect Form and form validation it handles the 400 invalid responses for you and will show the validation errors in the form.

[tbvgl]

The form had validation & the response wasn’t unexpected and didn’t throw an 400 either. I’m confused why chrome dev tools shows the exact response server connect expects while server connect doesn’t forward it to the frontend. I’ll add an event listener tmr to debug further.

[patrick]

I don’t understand how you have setup the sign up. Normally I would expect a server connect form where you post your credentials to the server action and on success you proceed and on an validation error the form shows the errors.

Perhaps you could explain how you have set it up and why you do it that way.

[scalaris]

@tbvgl

serverconnect1.data.api.data.message

What does

serverconnect1.data.api.data.message.toJSON()

output ?

[tbvgl]

Sorry, I should have clarified before. So here is what I’m trying to do:

We have an external application and that application has an API endpoint to sign up new users.
I’m building a separate checkout/signup page with Wappler to sign up users for our other application. So I’m not signing users up for an application build with Wappler. I’m only building the sign-up/checkout with Wappler.

The external application responds with a different message depending on if the user who I’m trying to sign up already has an account or not. I then need to redirect the user to welcome page A if they don’t have an account or show a modal if they already have an account.

The issue is that server connect is running the action, and chrome shows the right response in the network tab but I can’t use the response anywhere in Wappler.

[tbvgl]

Thanks but that didn’t output anything either.