Repeat for comma separated string field values

Wappler General How To
#1

I got a database field with image urls in it, separated by commas.
In appconnect I can bind these data with the following code:
get_product.data.query_product.product_images.split(',')[0]
get_product.data.query_product.product_images.split(',')[1]
etc…

Now I have created a table and set the table body a Repeat Children with the expression get_product.data.query_product.product_images:
image

I set the Image Source in the table cell to product_images, like this:
image

Unfortunately no images are shown in the table. Anyone an idea what I am doing wrong here?
The repeater is clearly not configured correctly, but I can’t figure out how to fix that.

Thanks for any help in advance.

#2

What are you trying to repeat exactly? The whole database query or something else? What is your repeat expression?
Why are your image stored in a single db field - that is a really bad idea and bad database design and only causes trouobles.

#3

Hi Teodor,

Thanks for your reply. This is the repeat expression I am using for the table body:

I am trying to repeat the multiple image urls from the the single database field, so I can display every single image in a new table row cell.

However, since you mention it’s bad practice to store all image urls in a single db field, what would be a better way to store them? We decided to store them in a single db field, because the images are product images and depending on the product there might be 1, 5, 20 or whatever number of images to be stored. So how can I store them better in the database so they can be shown as thumbnails in a gallery (as images in repeated table cells), no matter the number of images?

Thanks for your help and reply again in advance.

#4

In your current case you need to split the value by , like:

get_product.data.query_product.product_images.split(',')

and in the cell use {{$value}} to get the values.

Store them in a separate table and use a reference field where you store which record they belong to. Example, you have a table holding your records:

recordID | somefield 
--------------------------------
1        | some text here        
2        | some text here          
3        | some text here          
4        | some text here

And another one holding your images, related to the record they belong to.

imgID | recordID | image
--------------------------------
1     | 1        | imgname1.jpg
2     | 1        | imgname2.jpg
3     | 2        | imgname3.jpg
4     | 3        | imgname4.jpg
#5

So I did this, but now I am running into another problem:
I get the data from table 1 (holding my records) from a server connect action and use them as a repeater to display all records. Of course, I want to load the corresponding images for these records and show them in the repeat regions too.

I tried 2 ways:

  1. In the database query to load the repeat data I setup an INNER JOIN for the images table. Problem: There are several records in the images table for the respective recordID’s, which results in records being duplicated in the repeat region with another image in every duplicate.

  2. Get the images through a separate server connect action. Problem: I can’t get the proper data for every repeat area.

I would say method 1 is the way to go, but I tried literally every database query JOIN option and none of them works.

Please let me know if you require more information. Thanks for any help in advance!

#6

I think that this is the best way to do that

image

Edit: This is prior to the latest versions of Wappler. The latest versions do not require the database connection step.

#7

Please check:

#8

Thanks @ben and @Teodor.

This was the solution I was looking for. Don’t know why I didn’t define this as a nested repeat region myself and looking it up in the docs.

One more question:
This is an example of the returned data for a single product from the queries on my page:
image
Now, I want to use the highlighted url value of the first image record as an image source. How do I do that? I thought get_products.data.query_products_repeat[0].query_images[0].url would dothe trick, but unfortunately that doesn’t work. Thanks in advance again for your help :slight_smile:

#9

Well, where are you using this? In a repeat region or not?
If yes, please post the repeat region and its contents code here.

#10

Looking up the repeat region to send you a screenshot I found that I obviously had to select query_images[0].url from the repeat region data instead of from the server connect action data tree! :raised_hands:

Thanks for the quick reply Teodor!! :+1:

#11

But this will point to the first image only.
If you want to list all images per record, then you need to nest another repeat inside and use {{query_images}} as a source, then place an image with a dmx-bind:href="url" inside it.

#12

This is what I wanted at this area.

I will use the method below somewhere else, so thanks for pointing that out in addition to the tutorial! :slight_smile:

1 Like