Unable to display Server Connect data on page — API returns correct data but nothing renders

Poles.GAJO · May 11, 2025, 8:11pm

Hello Wappler community,

I’ve been working on a Wappler project to migrate a Microsoft Access database to the web using Wappler’s visual tools. The goal is to build a fully visual workflow without writing custom code unless necessary.

I’m currently stuck on a critical issue:
I'm unable to display data from a MySQL database table (Qolos ) on the page, despite the server action returning the correct data.

Project context:

Wappler version: Beta
OS: Windows 11
Database: MySQL hosted on DigitalOcean
Project based on a Wappler Template
Page type: NodeJS (index.ejs)

What works:

Server action /api/qolos/getQolosList fetches the correct data (as confirmed in browser via: http://localhost:3000/api/qolos/getQolosList )
Data is correctly output from the server-side JSON as:

json

CopyEdit

{ "query": [{ "Qolo": "…" }, …] }

Data structure is verified in the query builder (only column Qolo selected)

Page setup:

Added serverconnect1 to the index page and linked it to the correct server action
Added a dmx-repeat block (repeat1 ) bound to serverconnect1.data.query
Inside the repeat block, added a paragraph bound to Qolo
Verified that the correct dynamic binding path is shown as {{$value.Qolo}} or {{Qolo}}
“Auto Load” is enabled (No Auto Load is unchecked)

The problem:

Despite all steps looking correct:

The browser shows no content , or worse, shows repeated [object Object] instead of text values
All bindings are done via the Wappler UI (not manually coded)
DevTools → Network shows that dmxAppConnect.js fails to load (404)
The folder dmxAppConnect was missing originally; I manually added it later and placed dmxBootstrap5Navigation.js and config.js inside. After doing that, bindings started showing [object Object] , but still no usable data is rendered.
No other components on the page are loading either (e.g., Navbar, Header, Footer are invisible), which suggests an App Connect failure.

Additional checks:

config.js does include the correct metadata:

js

CopyEdit

dmx.config({
  "index": {
    "repeat1": {
      "meta": [{ "type": "text", "name": "Qolo" }],
      "outputType": "array"
    }
  }
});

The repeat expression is serverconnect1.data.query
Paragraph binding is {{Qolo}} from the repeat context

Questions:

Is the missing or broken dmxAppConnect.js responsible for this behavior?
If so, where can I safely download the official version of this file for NodeJS projects?
Is there anything else I’m missing or misconfigured in the setup?

Thank you for any guidance — I’ve been stuck on this for over a month, and I’m hoping your expertise can help clarify where the issue lies.

Best regards,
Poles Gajo

Apple · May 11, 2025, 8:22pm

You can forget everything else, we need to figure out why dmxAppConnect folder wasn't created in first place. Don't bother trying to fix anything else for now. You can start by deleting that dmxAppConnect folder. Fully close Wappler. Open Wappler, it should create automatically... hopefully... If not, open Project Updater, it's a button somewhere in Wappler

And then we can figure out your main issue

Poles.GAJO · May 11, 2025, 9:08pm

Thanks for your message and the guidance.

I followed your suggestion and deleted the dmxAppConnect folder entirely.
Then I fully closed Wappler and reopened it, but unfortunately the folder was not recreated automatically .

Just to be sure, I also used the Project Updater tool inside Wappler. It ran successfully, but still did not create the folder .

At this point, the project loads as before: the page layout (navigation, header, sections, footer) appears correctly, but the repeat component linked to the Server Connect data remains empty , and no data is shown.

I’ve attached a screenshot to confirm the situation:
No dmxAppConnect folder was regenerated

Any further help or a way to force regeneration of the required files would be appreciated.

Thanks again!

Teodor · May 11, 2025, 9:12pm

Well just add App Connect from the frameworks menu.

Poles.GAJO · May 11, 2025, 10:10pm

Thanks. I have now manually added App Connect from the Frameworks panel. The dmxAppConnect.js file is now present in /public/dmxAppConnect/.

The serverconnect component is set up and loads data from /api/qolos/getQolosList. The repeat region is bound to serverconnect1.data.query, and inside it I display Qolo using dmx-text="Qolo".

Still, it only shows [object Object] for each item — nothing else is broken, only the repeat section shows garbage.

Any ideas what could be wrong now that App Connect is added?

Apple · May 11, 2025, 10:37pm

Could you show the HTML code of that dmx-repeat? And also show a screenshot of your browser developer tools, network tab, showing the response of your server action

franse · May 11, 2025, 10:38pm

From your screenshot, your expression under dynamic inner text should be Qolo and not serverconnect......

EDIT: Forget what I said above..
Why do you have a dynamic inner text under the App component?

Delete that expression

Can you show the whole page code?

Poles.GAJO · May 11, 2025, 10:57pm

Thank you for your help!

As requested, here is the HTML code of the dmx-repeat section:

html

CopyEdit

<section id="qolos">
  <dmx-serverconnect id="serverconnect1" url="/api/qolos/getQolosList" dmx-param:sort=""></dmx-serverconnect>
  <div class="container">
    <div dmx-repeat:repeat1="serverconnect1.data.query">
      <p dmx-text="Qolo"></p>
    </div>
  </div>
</section>

Also, just to clarify: I believe the issue is not related to the browser itself, because the [object Object] result appears inside Wappler before even previewing in the browser. That’s why I suspect something is going wrong in the internal data binding or App Connect registration.

I'll also attach the browser’s Network tab screenshot as requested.

Poles.GAJO · May 11, 2025, 10:58pm

Thanks! I double-checked and the dynamic inner text binding is already set correctly to Qolo , as shown in this screenshot.

franse · May 11, 2025, 11:08pm

Have you deleted the inner text expression under the app component?

Apple · May 11, 2025, 11:18pm

In the browser tools network tab you have to click the request made to the relevant server action and then click the Response tab

No worries!

Poles.GAJO · May 12, 2025, 8:56am

The server response is correct, as shown in this screenshot (from the Network tab, under “Response”). All Qolo values are returned properly.

So the issue must be with how the repeat component displays the data in the app.

Any idea what might still block rendering in App Connect even though the data is returned correctly?

Screenshot 2025-05-12 1048391061×971 112 KB

Also, if you know of a good official video tutorial that shows how to bind data from a database and display it correctly on a NodeJS page (with App Connect and repeat), that would be really helpful.

Poles.GAJO · May 12, 2025, 8:57am

Yes, I’ve removed the dmx-text binding from the <body> tag (it was serverconnect1.data.query ) — that was just for debugging. Now only the inner <p> element inside the repeat region is bound to Qolo .

Evaldas · May 12, 2025, 9:17am

Just an off chance, but since they're rendered as objects, have you tried binding them with Qolo.$value?

Poles.GAJO · May 12, 2025, 9:43am

Thanks for all your support. I’ve double-checked everything including the repeat expression and dynamic text bindings — everything seems set correctly but I’m still getting [object Object] .

So I’ll take a fresh approach:
I’ll create a brand new page just to display the Qolo column from the database.

Meanwhile, if you could kindly provide a step-by-step guide or a video tutorial for building a minimal page that fetches and displays database values using Server Connect + repeat + binding, that would be very helpful.

I’ll share the result here once I test the new page.

Apple · May 12, 2025, 9:46am

In the browser developer tools console type dmx.app.data.content.serverconnect1.data
See the structure of the object if it's correct

Poles.GAJO · May 12, 2025, 10:25am

Thank you for the help!
I tested dmx.app.data.serverconnect1.data (instead of dmx.app.data.content... ) and it worked!
The array is there with 564 items.

Just to clarify: I’ve created a new blank page (qolos-test ) for debugging, so it's not using any layout. That’s probably why .content didn’t apply.
Now I will proceed to bind the data to the page.

Also, I wonder if the data being in Syriac (RTL Unicode text) might be causing the issue in rendering? I could test with a different table that has only English names if needed.

jimed99 · May 12, 2025, 10:39am

Welcome @Poles.GAJO - you requested some videos:
Wappler Youtube Home page - https://www.youtube.com/@Wapplerio

Two great tools to see all aspects of building a site by:
@Hyperbytes :
https://www.youtube.com/playlist?list=PLUjqTJN3byC9W9UFjsV9f9vefe_ZSFQfb
@ben

franse · May 12, 2025, 10:46am

Can you try another approach?
Create a row and select convert to repeat children
On the expression choose serverconnect1.data.query
Create a paragraph inside that row, with a static value like "example"

If you have 50 records, you'll see "example" 50 times
If that works, then you can change it to Qolo

Poles.GAJO · May 12, 2025, 9:14pm

I just wanted to share a quick update and thank everyone who contributed to this thread.
With some outside help, I managed to resolve the core issue, and now the page is correctly displaying data from the database in both Wappler and the browser.
I truly appreciate your time and suggestions — they helped me stay focused and test things from multiple angles.
Thanks again!