Show database media gallery contents on repeater with code

Ask the community
, , ,
1

Question:
Show database media gallery contents on repeater.

Product:
CMS, repeaters, texts.

What are you trying to achieve:
Show on the repeater, the contents of the media gallery such as the title of the media, the description and the cover image of the videos contained in the media gallery. But nothing is shown on the repeater.

Additional information:

import wixData from 'wix-data';

$w.onReady(function () {
    // Nome da coleção (substitua pelo seu banco de dados)
    const collectionName = "VideoStreaming"; 

    // Carregar os dados do banco de dados
    wixData.query(collectionName)
        .find()
        .then((results) => {
            if (results.items.length > 0) {
                // Filtrar os itens que possuem galeria de mídia
                const itemsWithGallery = results.items.filter(item => item.mediagallery && item.mediagallery.length > 0);

                // Processar cada item da galeria para criar um array de dados
                const formattedItems = itemsWithGallery.map(item => {
                    return item.mediagallery.map(media => ({
                        title: media.slug || "Sem título", // Extrair o título do arquivo
                        description: media.description || "Sem descrição", // Extrair a descrição do arquivo
                    }));
                }).flat(); // Achatar o array de arrays

                // Popula o repetidor com os dados formatados
                $w("#repeaterPGMD1").data = formattedItems;
            } else {
                console.log("Nenhum item encontrado com galeria de mídia.");
            }
        })
        .catch((error) => {
            console.error("Erro ao carregar os dados:", error);
        });

    // Vincular os elementos do repetidor ao título e descrição
    $w("#repeaterPGMD1").onItemReady(($item, itemData) => {
        $item("#titleTextPGMD1").text = itemData.title; // Substitua pelo ID do texto do título
        $item("#descriptionTextPGMD1").text = itemData.description; // Substitua pelo ID do texto da descrição
    });
});