Using .queryreferenced WITHIN a repeater (Repeater-in-a-repeater WORKAROUND)

Hello Velo Community.

I have two collections, Juice and Flavors. The Juice dataset is populating the repeater via a connection in the wix editor. Each Juice record has multiple Flavors, set up with a multi-reference field. The goal here is to show a list of Juice and for each list item of juice to have several images from its related flavors collection.

Essentially, I have a need for a repeater within a repeater, but since that is not possible, I am using a static amount of images that I plan on populating with a ‘lookup’ from each juice to its related Flavors.

For each Juice item, I have successfully returned an array of its related Flavors using wixData.queryReferenced, but I cannot figure out how to populate each of the images

import wixData from 'wix-data';
$w.onReady(function () {
    $w("#juiceDataset").onReady( () => {
        $w('#juiceRepeator').forEachItem(($item, itemData, index) => {
            //LINE BELOW SUCESSFULLY POPULATES IMAGE BUT DOES NOT HAVE NEEDED CONTEXT OF FLAVOR FROM .queryReferenced
            //$item('#flavorImg1').src = "wix:image://v1/f6fffb_3bd47bb0b5...";
            wixData.queryReferenced("Juice", itemData._id, "Flavors")
            .then((results) => {
                if(results.items.length > 0) {
                    let flavor1 = results.items[0];
                    let flavor2 = results.items[1];
                    let flavor3 = results.items[2];
                    $item('#flavorImg1').src = flavor1.image;       
                    $item('#flavorImg2').src = flavor2.image;   
                    $item('#flavorImg3').src = flavor3.image;
                    //SETTING THE IMAGE WORKED IN THE ABOVE SPOT BUT NOT HERE
                    //$item('#flavorImg1').src = "wix:image://v1/f6fffb_3bd47bb0b5...";
                } else {
                    // handle case where no matching items found
                    }
            })
            .catch((err) => {
                console.log(err);
            });
        });
    });
});

Like I attempt to explain in the comments, setting one of the images with a manual source works immediately after the .foreachitem line, but not after the .queryreferenced line, and without the info obtained from the query, I am unable to populate the image as desired.

Could someone point me in the wrong direction please? Once I figure out what I am doing wrong, I plan to make a proper for loop to iterate through the image setting, but for now I just want to get the basics working.

I appreciate everyone’s time taken to look at this for me. You are what makes Wix awesome.

Specifically, my issue is that I cant figure out how to use $Item AND the results of the queryReferenced.

$Item works fine before the queryReferenced, but not after/in.


Any help would be greatly appreciated.