Can't get Bootstrap5 Table Generator to show full query data, some of it is visible and correct though

Wappler General How To
,
#1

Hi everyone!

I’m following along with the tutorial from @Hyperbytes and I’m in section 43, how to build a content-page based on pagetype.

I can’t get the Bootstrap5 table to show the full query, as in all the data in it, but partially it shows up. I.e. the user_id will be shown correctly, but data-fields like ‘first_name’ etc. just give the same description as in the header, in this case ‘first_name’, but not the value.

As far as I understand the query itself is good.

I’ll attach a screenshot:

Screenshot 2024-02-05 10:03:07
Screenshot 2024-02-05 10:03:071280×800 117 KB

The BS5 table is set up the usual way, with the full query as population and I removed images and comments from the data-fields. Also in the browser with the added ?pagetype=P, the full query-result shows up.

I just don’t see what I’m doing wrong here…

All help is greatly appreciated!

#2

Could you post an image of the query builder from within Wappler?

#3

Of course…

Screenshot 2024-02-05 10:18:15
Screenshot 2024-02-05 10:18:151280×800 103 KB

This is really a very difficult query I guess…

#4

Screenshot 2024-02-05 10:22:04
Screenshot 2024-02-05 10:22:041280×800 95.2 KB

#5

You can preview your page on the browser and see the query.

  1. Preview the page
  2. Right click inspect/F12
  3. Network and select All
  4. Reload it again

You’ll see the query listed there (such as other files), so you can check if its a server side problem or a client side rendering the query.

#6

The query as shown in the original post by me, asking for help, is from the webbrowser.

But, I’ll give it here as well. I think the query-result looks good… But yeah… I’m a beginner with Wappler.

http://localhost:3000/api/admin/page-data/get_pagedata?pagetype=P gives:

{"query":[{"page-content_id":1,"page-title":"My first page","page-description":"This is the first page I am placing in my brand new site!","page-content-online":1,"page-content-private":null,"page_date_created":"2024-02-04 15:58:20","page-content_date_edited":"2024-02-04 16:00:02","event-start_datetime":"2024-02-04 16:00:05","event-end_datetime":"2024-02-04 16:00:09","latitude":0,"longitude":0,"geocoded":0,"creator_id":120,"pagetype":"P","last_editor_id":120,"first_name":"M","last_name":"H","editor_first_name":"M","editor_last_name":"H","page-images":[{"image-link":"https://mpost.io/wp-content/uploads/RARI-Chain-Mainnet-Launch-1024x576.jpg","first_name":"M","last_name":"H"}],"page-videos":[],"comments":[{"comment":"He man!","comment_date":"2024-02-04 16:05:39","flagged_comment":null,"flagged_comment_date":null,"first_name":"M","last_name":"H","reactions_emoji":[{"reaction":"L","first_name":"M","last_name":"H"},{"reaction":"A","first_name":"M","last_name":"H"}]},{"comment":"What ya doin?","comment_date":"2024-02-04 16:06:57","flagged_comment":null,"flagged_comment_date":null,"first_name":"M","last_name":"H","reactions_emoji":[]}]}]}

I guess I’ll build it again, without adding extra data-fields…

#7

So the query is fine, the results are the expected but not rendering on the bootstrap table?

#8

Yes… That’s what it looks like… I don’t know how to solve this hahaha!

#9

What is showing in the table?

#10

Screenshot 2024-02-05 10:46:59
Screenshot 2024-02-05 10:46:591280×800 57.7 KB

#11

For good measures I’ll also add the Bootstrap5 table config:

Screenshot 2024-02-05 10:48:26
Screenshot 2024-02-05 10:48:261280×800 77 KB

#12

Did you put the brackets and ‘’ around the values?

#13

No I did not… They are there after the Populate is added… As per the video I only deleted the images and comments. I also tried removing the brackets and apostrophes, but no dice…

#14

I believe that is the issue.

Try this, double click in one of the values, remove the [’ and '] from it. Save it and re-run it in the browser to see if that fixes the issue.

If it does, repeat it on the remaining ones.

#15

Then it gives me ‘NaN’ in the field… instead of the earlier header. So I still don’t get the data to show properly…

#16

Ok, thanks for trying that.

I keep going back to the query, something seems off about it, but I can not put my finger on it.

Someone else may be able to look at it and immediately see the problem. Are you able to work on other aspects of your site until other people besides @franse and I are on?

#17

Yes… No problem. In the meantime I’ll try and re-build this part.

Indeed, I think something is off with the query… It seems mangled in the end. I’ll look into it.

And thanks very much for the help so far!

#18

Try not to use dashes and spaces in your database column names. This will save you a lot of troubles later.

#19

Thank you! I’ll remove them…

#20

Found it! I made a mistake with attaching the multi-reference table to the pagecontent-table, instead of attaching it to the comments-table. So I guess it gave data, and it looked good, but the multireferencing part got mangled.

Thanks again for the help in this. Next time I’ll put forward a real problem… :wink:

2 Likes