Dynamic Page Repeater with Text from Dataset Array by code

Ask the community
, ,
1

Question:
I have a repeater with text on a dynamic page. I would like to show feedbacks from an array field from the dataset.

Product:
Wix Studio - Veloc Code - Repeater with Text - Array Field from Dataset

What are you trying to achieve:
I would like to show the array elements which are texts on the repeater of the respected item of the dynamic page.

What have you already tried:
I tried two ways:
1.

$w.onReady(() => {
    // Get the dataset connected to the Szakemberek collection
    const szakemberekDataset = $w('#szakemberekDataset');

    // Wait until the dataset is ready
    szakemberekDataset.onReady(() => {
        // Get the current item's data from the dataset
        const currentItem = szakemberekDataset.getCurrentItem();

        // Log the current item's data to inspect its structure
        console.log('Current Item:', currentItem);

        // Get the feedback array
        const feedbackArray = currentItem.feedbackArray;

        // Log the feedback array to inspect its content
        console.log('Feedback Array:', feedbackArray);

        // Check if the feedback array exists and has items
        if (feedbackArray && feedbackArray.length > 0) {
            // Populate the repeater with feedback items
            const repeaterData = feedbackArray.map(feedback => ({ feedbackText: feedback }));

            // Log the repeater data to inspect its content
            console.log('Repeater Data:', repeaterData);

            // Set the repeater data
            $w('#feedbackRepeater').data = repeaterData;

            // Bind the feedback text to the repeater's text element
            $w('#feedbackRepeater').onItemReady(($item, itemData) => {
                // Log itemData to inspect its structure
                console.log('Item Data:', itemData);

                // Ensure the text element exists before trying to set its text
                const textElement = $item('#feedbackText');
                if (textElement) {
                    console.log('Setting text for item:', itemData.feedbackText);
                    textElement.text = itemData.feedbackText;
                } else {
                    console.error('Text element not found in repeater item');
                }
            });
        } else {
            // If no feedbacks are found, clear the repeater
            console.log('No feedbacks found');
            $w('#feedbackRepeater').data = [];
        }
    });
});

$w.onReady(() => {
    populateFeedbackRepeater();
});

function populateFeedbackRepeater() {
    // Query the dataset connected to the Szakemberek collection
    const dataset = $w('#szakemberekDataset'); // Ensure this matches your dataset ID

    dataset.onReady(() => {
        const currentItem = dataset.getCurrentItem();

        console.log('Current Item:', currentItem);

        const feedbackArray = currentItem.feedbackArray;
        console.log('Feedback Array:', feedbackArray);

        if (feedbackArray && feedbackArray.length > 0) {
            const repeaterData = feedbackArray.map(feedback => ({ feedbackText: feedback }));
            console.log('Repeater Data:', repeaterData);

            $w('#feedbackRepeater').data = repeaterData;

            $w('#feedbackRepeater').onItemReady(($item, itemData) => {
                console.log('Item Data:', itemData);

                const textElement = $item('#feedbackText');
                if (textElement) {
                    console.log('Setting text for item:', itemData.feedbackText);
                    textElement.text = itemData.feedbackText;
                } else {
                    console.error('Text element not found in repeater item');
                }
            });
        } else {
            console.log('No feedbacks found');
            $w('#feedbackRepeater').data = [];
        }
    });
}

Additional information:

In the log I get the following:

Current Item: Data

Feedback Array Data:
0: “text1”
1: “text2”
2: “text3”

Repeater Data:
Array(3)
0: “text1”
1: “text2”
2: “text3”

Problem: not working, the repeater text doesn’t show the dataset data.

2

I see you’re currently trying to set the repeater data as the feedbackText array, although it’s missing an _id.

From the docs:

A repeater’s data is stored as an array of objects. Each object in the array must contain a unique _id property which is used to match the object’s data to the individual repeated items of the repeater as described below. The value of the _id property must be a string and can only contain alphanumeric characters (A-Z, a-z, 0-9) and hyphens (-). Other than _id, the objects in the repeater’s data array can contain anything you want.

3

Thank you very much, it is working now.

Here is my full code if somebody else needs it.

Test code:

Test Repeater Feedback

$w.onReady(() => {
    const testFeedbacks = [
        { _id: '1', feedbackText: 'Test feedback 1' },
        { _id: '2', feedbackText: 'Test feedback 2' },
        { _id: '3', feedbackText: 'Test feedback 3' }
    ];

    $w('#feedbackRepeater').data = testFeedbacks;

    $w('#feedbackRepeater').onItemReady(($item, itemData) => {
        console.log('Test Item Data:', itemData);
        $item('#feedbackText').text = itemData.feedbackText;
    });
});

Final version of the code:

$w.onReady(() => {
    populateFeedbackRepeater();
});

function populateFeedbackRepeater() {
    // Query the dataset connected to the Szakemberek collection
    const dataset = $w('#szakemberekDataset'); // Ensure this matches your dataset ID

    dataset.onReady(() => {
        const currentItem = dataset.getCurrentItem();

        console.log('Current Item:', currentItem);

        const feedbackArray = currentItem.feedbackArray;
        console.log('Feedback Array:', feedbackArray);

        if (feedbackArray && feedbackArray.length > 0) {
            const repeaterData = feedbackArray.map((feedback, index) => ({
                _id: String(index), // Assign a unique _id
                feedbackText: feedback
            }));
            console.log('Repeater Data:', repeaterData);

            $w('#feedbackRepeater').data = repeaterData;

            $w('#feedbackRepeater').onItemReady(($item, itemData) => {
                console.log('Item Data:', itemData);

                const textElement = $item('#feedbackText');
                if (textElement) {
                    console.log('Setting text for item:', itemData.feedbackText);
                    textElement.text = itemData.feedbackText;
                } else {
                    console.error('Text element not found in repeater item');
                }
            });
        } else {
            console.log('No feedbacks found');
            $w('#feedbackRepeater').data = [];
        }
    });
}
4

Amazing!

Thanks for coming back to share the final code - we love this kinda stuff :muscle: