Repeating dynamic card

Hello, I’m trying to repeat a dynamic card.
I’ve read the documentation and I’ve added a “repeat” before div class="card"
The repeater does not work properly. I should see six different articles, and instead I see the same article repeated 6 times

32


The variables aren’t quite right and are selecting the first record from the query.

Remove view_prodotti.data.prodotti_elenco[0]. from card-title and card-text so you’re just left with {{titolo}} and {{descrizione}} respectively.

When using the data picker, select from the repeater loop and not the server connection.

When putting code into a post, could you paste the actual text (in a code tag) in rather than a screenshot? That would make it much easier to respond so we don’t have to manually type everything. :wink:

Hello,

just create a row> col > card structure and apply repeat children to the row. Adjust the col size as per your needs.

This is what your code should look like

<div class="row row-cols-1" is="dmx-repeat" id="rptProducts" dmx-bind:repeat="view_prodotti.data.prodotti_elenco">
    <div class="col">
        <div class="card h-100">
            <img src="" class="card-img-top" alt="Foto" dmx-bind:src"'public/prod/'+img">
            <div class="card-body">
                <h4 class="card-title">{{titolo}}</h4>
                <p class="card-text">{{descrizione}}</p>
                <a href="#" class="btn btn-primary">Dettagli</a>
            </div>
        </div>
    </div>
</div>

if you want cards next to each other in larger screens then the first line will look like

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3" is="dmx-repeat" id="rptProducts" dmx-bind:repeat="view_prodotti.data.prodotti_elenco">

Shouldn’t the titolo and descrizione be in {{ }}?

Oops, will change. :sweat_smile:

1 Like

Thank you all :slight_smile:

NEW EDIT: Now it appears to do this only in Wappler. On local site working now. Very strange this.

Same sort of problem here.
On “repeat children” my card disappears. Also I cannot add dynamic data.