Filter Dataset from another dataset using Velo

Hello,
I have a dynamic page (3 Item Pages)
Each Contain Slideshow “Wanted to add Video followed by 7 images”
Tried using the example set in the Velo Slide “Worked fine” But displays same item in each page since I don’t have a filter
I want to apply same concept as if login user email - Field"login Email" in dataset
2 Datasets
Category
1 Dynamic: Item 1 A
Item 2 B
Item 3 C

Then another Dataset Contains
Image Category
1 A
2 A
1 B
2 B

Set Filter Category from Dynamic Dataset = Category in Dataset but in Velo Since Slideshow Cannot be connected from editor
Thank you guys so much. Learned a lot by being here

PS: Im open for any other workaround if you guys have better ideas

Just to traslate your description…

I have a dynamic page (3 Item Pages)
Ok, you have a dynamic page (which is a normal page where all your elements are connected with a database by a dataset). Let it be → DATASET1
You have 3-items, whats means that you have 3-items in your DATABASE which is connected with your (dynamic) page.

And further more, you have a second DATASET → let it be → DATASET-2
Which is connected to another databse, where you have stored some images.

But all the rest of your description was not clear.

Each Contain Slideshow “Wanted to add Video followed by 7 images”

Tried using the example set in the Velo Slide “Worked fine” But displays same item in each page since I don’t have a filter I want to apply same concept as if login user email - Field"login Email" in dataset

WHAT ? Could you please describe this one more time? Personaly me did understand almost nothing in this description part.

Could you be so kind and elaborate more on your project and what you are trying to achieve?

What is clear right now of your used project-setup?

  1. 2x DATASETS DATASET-A / DATASET-B (1x dynamic / 1x non-dynamic)
  2. 2x involved DATABASES (one of it holds images which should be shown in a slideshow?)
  3. 1x SLIDESHOW-Box
  4. You want to do some filtering process, ok.

Please add also some screenshots of involved DATABASES / Database-FIELDS.

When you do a description of your issue, always try to describe it clear and as most detailed as possible.

I wanted to thank you for making the time to help me out. & apologize If my explanation wasn’t clear

I have a Dynamic Page (Item) “Under the Services that we offer”
Tutoring Services
Courses & Programs
Activity Clubs

Item Page Layout:
Toggle Switch “expand/Collapse Element”
Slideshow
Button → Expands HTML “Connected to Dataset src:Url”

What im trying to do
Have a “video + 7 Images” in the Slideshow that are different for each dynamic page

Problem:
Cant Display Different Slideshow Content for each "Dynamic Item Page "

Example Used
Example “Dynamic Slideshow” I tried to replicate from Velo.

Problems Encountered
1- in this example the images are assigned Vertically “Column” "While my Dynamic Page each item has the entire line "

Thoughts I Had:
1- Connect each slide to a separate field “moving horizontally”
e.g Title, Video, Image(slide1), Image(slide2) etc.
or
2- Create another dataset and try and link both together with a filter or so.
e.g Create a field “Group” in “dynamic” Dataset 1 & Dataset 2
filter group is equal to Group from Dataset 2
or Create Field in Dataset 2 with URL “Since Dataset 1 already filtered based on Url” not Sure

3- Do not use dynamic page & Create 3 Separate static page

Thats where I got stuck, Please feel free to ask for more details if I failed to explain again
Thanks again

Here an ecxerpt of your mentioned example…

Each item has its own row.
On non of your pics you did show the setup of your one.

I need to see the whole databse-structure which is related to your issue.

  1. Just show all related DATABASES to this issue.
  2. Forget about dynamic pages, do not mention it, because i think it totaly confuses you, just concentrate onto your ITEMS inside DATABASE and the DATABSE-STRUCTURE.

The most important thing is always the → DATABASE-STRUCTURE → how is constructed your DATABSE. As you already mentioned, your DATABSE-STRUCTURE differs from the DATABSE-STRUCTURE of the Wix-Slide-Show-Example. And this is exactly the point why you have issues. If you are using another DB-structure → then you also will have to modify your code.

BTW: this is the code out of the Wix-Examle:

import wixData from 'wix-data';

$w.onReady(async function () {
    let slidesData = await getSlideshowDataFromDatabase();
    loadSlideshowData(slidesData);
});

function loadSlideshowData(slidesData) {
    const slideElements = $w("#dynamicSlideshow").slides;
    slideElements.forEach((slide, index) => {
        $w(`#${slide.id}`).background.src = slidesData[index].slideBackground;
        $w(`#slideTitle${index}`).text = slidesData[index].title;
        $w(`#slideDescription${index}`).text = slidesData[index].description;
        $w(`#slideButton${index}`).link = slidesData[index].buttonUrl;
    })
}

function getSlideshowDataFromDatabase() {
    return wixData.query("DynamicSlides").find().then(results => {
        return results.items;
    })
}

Just 20-code-lines → nothing of complexity, which should make big headaches…

Please show your DATABSE-STRUCTURE completely, not just the title-part which is included in all databases as a standard DB-Field by default.

Cant Display Different Slideshow Content for each "Dynamic Item Page "

Do not forget → each dynamic page = each item-row in your DATABSE! (NOT COLUM!)

And this one…

3- Do not use dynamic page & Create 3 Separate static page
Could be also a possible solution → working completely DYNAMIC-PAGE and DATASET-FREE! → managing everything completely by code.

The disatvantage, when taking this way → more coding-work. More coding know-how affordable!

Forgot to ask → Where is your CODE by the way?

Hello, I Tried to organize myself a bit more
This Is my Page Code: “includes”
1- Toggle Box “w Show/Expand Function”
2- Embeded html from dataset
3- On click Expand Function

const glideOptionsRight = {
    "duration": 450,
    "angle": 270,
    "distance": 202
};

const glideOptionsLeft = {
    "duration": 450,
    "angle": 90,
    "distance": 202
};

const fadeOptions = {
    "duration": 100
};

$w.onReady(function() {

    $w("#dynamicDataset").onReady(() => {
        $w("#JotformEmbedhtml").scrolling = "no";
        let widget = $w('#dynamicDataset').getCurrentItem().jotformLink;
        $w("#JotformEmbedhtml").src = widget;
    });

    $w('#leftBtnWhite').onClick(toggleFront);
    $w('#rightBtnBlack').onClick(toggleFront);
    $w('#rightBtnWhite').onClick(toggleBack);
    $w('#leftBtnBlack').onClick(toggleBack);
})

function toggleFront() {
    $w('#HomeSlideFull').collapse()
    $w('#OnlineSlideFull').expand()
    $w('#leftBtnWhite').hide("fade", fadeOptions);
    $w('#leftBtnBlack').show();
    $w('#rightBtnBlack').hide("fade", fadeOptions);
    $w('#rightBtnWhite').show("glide", glideOptionsRight);
}

function toggleBack() {
    $w('#OnlineSlideFull').collapse()
    $w('#HomeSlideFull').expand()
    $w('#leftBtnBlack').hide();
    $w('#leftBtnWhite').show("glide", glideOptionsLeft);
    $w('#rightBtnWhite').hide("fade", fadeOptions);
    $w('#rightBtnBlack').show();
}

export function ContactFormButton_click(event) {
    $w('#JotformStrip').expand();
    $w('#CalculatePriceAnchor').scrollTo();
    return;
}

Now for the slideshow part
Scenario 1: Changing the Code to assign it to dynamic Dataset “as you mentioned item row”
Using only 1 dataset “Educational Services”


Code I tried manipulating for 3 slides by connecting each slide to its respective Field by it didn’t work, not sure I understand the slideshow logic for the code

import wixData from 'wix-data';

$w.onReady(async function () {
    let slidesData = await getSlideshowDataFromDatabase();
    loadSlideshowData(slidesData);
});

function loadSlideshowData(slidesData) {
    const slideElements = $w("#HomeSlideFull").slides;
    slideElements.forEach((slide) => {
        $w(`#slide0`).background.src = slidesData.video0Home;
        $w(`#slide1`).background.src = slidesData.slide1Home;
        $w(`#slide2`).background.src = slidesData.slide2Home;
    })
}

function getSlideshowDataFromDatabase() {
    return wixData.query("EducationalServices").find().then(results => {
        return results.items;
    })
}

Scenario 2 & 3
Use same Code as in the example
Dynamic Dataset -->Educational Services
Data Set → Service Slides
Filter: Group (Educational Services) = Group (Service Slides)

Scenario 2: Use fields like example (But indexing code might need a bit of rework as ill have 2 fields (1 Video + 1 Image)

Scenario 3: set field as gallery (Not sure if it will work) so I can use Video & images
Data Set → Service Slides

Code:

import wixData from 'wix-data';

$w.onReady(async function () {
    let slidesData = await getSlideshowDataFromDatabase();
    loadSlideshowData(slidesData);
});

function loadSlideshowData(slidesData) {
    const slideElements = $w("#HomeSlideFull").slides;
    slideElements.forEach((slide, index) => {
        $w(`#${slide.id}`).background.src = slidesData[index].galleryHome;
        
    })
}

function getSlideshowDataFromDatabase() {
    return wixData.query("ServicesSlides").find().then(results => {
        return results.items;
    })
}

Error:

I apologize if my codes aren’t great, Im a beginner but learned a lot from being here with all your help
Thanks again

Ok, so let’Ts break all that complicated code a little bit into pieces and make it a little bit more simple.

1) That you always start with $w.onReady() → you know this, right?
2) As we both know, you want to feed your Slide-Show-Box with data from your DB!
3) Therefore you have first to get the DATA from your DB…

let slidesData = await getSlideshowDataFromDatabase(); 
console.log("Slide-Data: ", slidesData);

This functions gets all DATA out of your DATABASE…

function getSlideshowDataFromDatabase() {
    return wixData.query("DynamicSlides").find().then(results => {
        return results.items;
    })
}
  1. …and feed your Slide-Show with the queried data from DB…
feed_SlideshowWithData(slidesData);

This functions feeds your Slide-Show with data (loads your Slide-Show…

function feed_SlideshowWithData(slidesData) {
    const slideElements = $w("#dynamicSlideshow").slides; console.log("Slide-Elements: ", slideElements);
    for (let i = 0; i < slideElements.length; i++) {
        const slideElement = slideElements[i]; console.log("Slide-Element: ", slideElement);
        $w('#'+slideElement.id).background.src = slidesData[i].slideBackground;
        $w('#slideTitle'+i).text = slidesData[i].title;
        $w('#slideDescription'+i).text = slidesData[i].description;
        $w('#slideButton'+i).link = slidesData[i].buttonUrl;    
    }
}
  1. If you take a look onto the Slide-Show-Element, you will recognice, that there are different elements which can be feeded by code from BD…

a) Title -----------------> TEXT (STRING)
b) Background ------> IMAGE (IMAGE)
c) Button-Link ------->String-URL(STRING)
d) Description -------> TEXT (STRING)
You can even put more elements onto the slide-show-element and connect them to your Database.

For example:
e) Changing Button-Label by values from database.
f) Foreground-Image also feeded by database.

  1. And yes you should consider to continue with Version-2 (Scenario-2) where you put your data per each row (vertical-structured/ordered data).


7) And when you need to show several pics in each of DB-Row → you can image-urls in an → ARRAY → like → [imgUrl1, imgUrl2, imgUrl3… and so on…] and you can do it for each row. This way you would be able eben to load hundred of pics per each data-row into your Slide-Show.

Of course therefore you would have to modify your code, to generate this functionality, which the example to dot offer you.

  1. I talked about → making things easier… look at this simplified code, is this [main] code-part more readable for you ???
function feed_SlideshowWithData(slidesData) {
    const slideElements = $w("#dynamicSlideshow").slides; 
    console.log("Slide-Elements: ", slideElements);
   
    for (let i = 0; i < slideElements.length; i++) {
        const slideElement = slideElements[i]; console.log("Slide-Element: ", slideElement);
        $w('#'+slideElement.id).background.src = slidesData[i].slideBackground;
        $w('#slideTitle'+i).text = slidesData[i].title;
        $w('#slideDescription'+i).text = slidesData[i].description;
        $w('#slideButton'+i).link = slidesData[i].buttonUrl;    
    }
}

It’s nothing else than a transformed/converted code from an each-loop into a → for-loop + some simplified code-spelling.

Code-Version from Wix-Example:

function loadSlideshowData(slidesData) {
    const slideElements = $w("#dynamicSlideshow").slides;
    slideElements.forEach((slide, index) => {
        $w('#'+slide.id).background.src = slidesData[index].slideBackground;
        $w('#slideTitle'+index).text = slidesData[index].title;
        $w('#slideDescription'+index).text = slidesData[index].description;
        $w('#slideButton'+index).link = slidesData[index].buttonUrl;
    })
}
  1. This error here…


…what does it tell you ?

It tells you, that you are using an OBJECT instead of a STRING.

This is an OBJECT —> {firstName: “Alino”, lastName: “Michel”}, which holds 2-Strings inside → “Alino” + “Michel”.

Now try it again, with all your new knowledge. I am sure you will get this working by your own, without any help. You are already very close.

Hello again,
first wanted to thank you for your lengthy explanation, it really taught me a lot
I got your code to work but failed to manipulate it further.
this is using your code
tried it with a “Image” & once more with a “video” —>BOTH work Great

BUT couldn’t combine both Images & Videos
When I saw the java tried to rewrite the code

tried to start i = 1
so I connect first slide direct to the video & rest to images

function feed_SlideshowWithData(slidesData) {
    const slideElements = $w("#dynamicSlideshow").slides; 
    console.log("Slide-Elements: ", slideElements);
   
    for (let i = 1; i < slideElements.length; i++) {
        const slideElement = slideElements[i]; console.log("Slide-Element: ", slideElement);
        $w('#slide1').background.src = slidesData[i].videoHome;
        $w('#'+slideElement.id).background.src = slidesData[i].imageHome;  
    }
}

then tried connecting it manually

function feed_SlideshowWithData(slidesData) {
    const slideElements = $w("#dynamicSlideshow").slides;
    console.log("Slide-Elements: ", slideElements);

    const slideElement = slideElements;
    console.log("Slide-Element: ", slideElement);
    $w('#slide1').background.src = slidesData.video0Home;
    $w('#slide2').background.src = slidesData.image1Home;
    $w('#slide3').background.src = slidesData.image2Home;
    }
}

got this error

Thanks :raised_hands:

Here an working example for you, which pics up IMAGES → HORIZONTALY → out of an ARRAY…

https://russian-dima.wixsite.com/my-site-3

Here a screen of the related DATABASE.

You have so much possibilities how to generate your slide-flow and how to structure your databse.

As i already mentioned, you can store all your IMAGE-URLs inside an ARRAY in each row, as many as you want (until cell-capability is full).

The current code:

import wixData from 'wix-data';

let slidesData;  let myInterval; let count;

$w.onReady(async function() {
    slidesData = await getSlideshowDataFromDatabase(); console.log("Slide-Data: ", slidesData);
    load_SlideshowData();
});

/*
function loadSlideshowData(slidesData) {
    const slideElements = $w("#dynamicSlideshow").slides;
    slideElements.forEach((slide, index) => {
        $w('#'+slide.id).background.src = slidesData[index].slideBackground;
        $w('#slideTitle'+index).text = slidesData[index].title;
        $w('#slideDescription'+index).text = slidesData[index].description;
        $w('#slideButton'+index).link = slidesData[index].buttonUrl;
    })
}
*/

function getSlideshowDataFromDatabase() {
    return wixData.query("DynamicSlides").find().then(results => {
        return results.items;
    })
}


function load_SlideshowData() {count = 0;
    const slideElements = $w("#dynamicSlideshow").slides; console.log("Slide-Elements: ", slideElements);
    for (let i = 0; i < slideElements.length; i++) {
        const slideElement = slideElements[i]; console.log("Slide-Element: ", slideElement);
        $w('#'+slideElement.id).background.src = slidesData[i].slideVideo;
        //$w('#'+slideElement.id).background.src = slidesData[i].slideBackground;
        $w('#slideTitle'+i).text = slidesData[i].title;
        $w('#slideDescription'+i).text = slidesData[i].description;
        $w('#slideButton'+i).link = slidesData[i].buttonUrl;    
    }   
    myInterval = setInterval(xxx, 500);
}

function xxx(){console.log(count)
    if(count>=6){count=0;} //clearInterval(myInterval);}
    $w('#img1').src = slidesData[0].slidePic[count]; 
    $w('#img2').src = slidesData[0].slidePic[count]; 
    $w('#img3').src = slidesData[0].slidePic[count]; 
    $w('#img4').src = slidesData[0].slidePic[count]; 
    count++
}

You can do so much more out of it…
Oh and YES! This example uses → setInterval to loop trough ARRAY in certain timing.

On FOREGROUND you can see the IMAGE-LOOPS and on BACKGROUND you see the VIDEO-LOOPS.

You can construct a → CONTROL-PANEL which will regulate all timings (Video-Switch-Timings / Image-Switch-Timings), you can integrade a STOP-Button, you can tell your SLIDER the row or ARRAY, from which you your data to be pulled of (and everything would work during RUNTIME).

Thanks for your response, I think you misunderstood me, what I meant
is Background for Slide 1 is a Video
Background for Slide 2 - 6 is Image

I managed to recreate an example on editor, to explain to you what I was trying to achieve.

https://ptegypt.wixsite.com/my-site-3

Downside by using this method → Cant connect Dataset / Dynamic Page

Appreciate your time

Ok, look at this pic. Let’s say this is your DB-Structure for your SLIDE-Show.

All you want is to change the DB-Field on (item1 + item8) from image to video, right?
So let’t now imagine your slide-show starts, what shall happen now?

-of course it should emiddiately start with an item from the “video”-DB-Field, right?
-and emmidiately it should switch back to the “image”-DB-FIELD on item-2
-the same happens again a second time when item-8 is reached.
-switching back to videos and on item-9 switching back to images.

But how we do all this magic by code?

Which coded process do you know, which can decide between true and false or make a difference between 1 and “1” and so on?

YES! Of course it is the simple if-else-statement :wink:

You have a for-loop running…

for(let i=0; i<slideElements.length; i++){
   constslideElement = slideElements[i]; console.log("Slide-Element: ", slideElement);

}

In this for-loop, you are feeding your Slide-Show with data out from your DATABASE, to be more precise → from FIELD → videoHome (in this example)

for(let i=0; i<slideElements.length; i++){
   const slideElement = slideElements[i]; console.log("Slide-Element: ", slideElement);
   
   $w('#'+slideElement.id).background.src = slidesData[i].videoHome;
}

But what you want to have is an automatic maden DECISION by CODE, which will be able to recognice, when a switch between 2-FIELDS has to be done, to load from the right DB-FIELD (either IMAGE or VIDEO), right? YES → RIGHT!

So, let’s do the MAGIC!

for(let i=0; i<slideElements.length; i++){
   constslideElement = slideElements[i]; console.log("Slide-Element: ", slideElement);
   
   if() {$w('#'+slideElement.id).background.src = slidesData[i].videoHome;}
   else {$w('#'+slideElement.id).background.src = slidesData[i].imageHome;}
   
}

But now the question! → How you can make your code recognize when to use either the VIDEO or the IMAGE-FIELD?

This last step you will resolve by your own! Just take a concentrated look onto the given DB-Picture i have inserted in this post! Tip: empty-fields!

Wow, your solution was brilliant! Cant thank you enough.
Watching you explain the code in a buildup process, very organized. Shows the logic behind everything you did. Which Improves me massively. Thanks a lot

I tried Your code

function feed_SlideshowWithData(slidesData) {
    const slideElements = $w("#HomeSlideFull").slides;
    console.log("Slide-Elements: ", slideElements);

    for (let i = 0; i < slideElements.length; i++) {
        const slideElement = slideElements[i];
        console.log("Slide-Element: ", slideElement);

        if() { $w('#' + slideElement.id).background.src = slidesData[i].videoHome; }
        else { $w('#' + slideElement.id).background.src = slidesData[i].imageHome; }
    }
}

Got this error.

So I Tried to figure it out, added

function feed_SlideshowWithData(slidesData) {
    const slideElements = $w("#HomeSlideFull").slides;
    console.log("Slide-Elements: ", slideElements);

    for (let i = 0; i < slideElements.length; i++) {
        const slideElement = slideElements[i];
        console.log("Slide-Element: ", slideElement);

        if(slidesData.videoHome) { $w('#' + slideElement.id).background.src = slidesData[i].videoHome; }
        else { $w('#' + slideElement.id).background.src = slidesData[i].imageHome; }
    }
}

It worked, But not sure if what I did was right.

Last 2 Things. Again, can’t thank you enough for your patience & assistance.

1st: if I want to include this slideshow in the dynamic page, ill need to filter the dataset to selects the 7 slides only for this PAGE
I used to achieve that by filtering the Slides DATASET with the Item"DynamicDataset" so I created an extra field —> Category in both Dataset and make Filter That:
Field (Category) in Dynamic Dataset = Field (Category) in Images/Videos Dataset

if I understood your Explanation Earlier correctly. I Believe the FILTER CODE should go here → but don’t know how to make it with a code
The PART that gets all DATA out of my DATABASE…

function getSlideshowDataFromDatabase() {
    return wixData.query("ServiceSlides").find().then(results => {
        return results.items;

    })
}

2nd Question:
since I have 2 Slideshows ELEMENTS in the same page
I’ll need to change the name of the 2nd CONST functions so they don’t get messed up.“Highlighted in Yellow” & merge them under same on ready function
Am I heading in the right direction or Do I need to change something else “slidesData”?

import wixData from 'wix-data';

$w.onReady(async function () {
    let slidesData = await getSlideshowDataFromDatabase();
    feed_SlideshowWithData(slidesData);
    console.log("Slide-Data: ", slidesData);
});

function getSlideshowDataFromDatabase() {
    return wixData.query("ServiceSlides").find().then(results => {
        return results.items;

    })
}

function feed_SlideshowWithData(slidesData) {
    const slideElements = $w("#HomeSlideFull").slides;
    console.log("Slide-Elements: ", slideElements);

    for (let i = 0; i < slideElements.length; i++) {
        const slideElement = slideElements[i];
        console.log("Slide-Element: ", slideElement);

        if() { $w('#' + slideElement.id).background.src = slidesData[i].videoHome; }
        else { $w('#' + slideElement.id).background.src = slidesData[i].imageHome; }
    }
}

Thanks again

  1. Yes! Correct!
    To transform your data-query-request into a filtering one, you will need to do something like this one… this is just an example, but should lead you into the right direction…
function getSlideshowDataFromDatabase(DB-FIELD, VALUE, VALUE1, VALUE2, VALUE3) {
    return wixData.query("ServiceSlides")
    .eq(DB_FIELD, VALUE)
    .contains(DB_FIELD, VALUE)
    .hasSome(DB_FIELD, [VLAUE1, VALUE2, VALUE3])
    .hasAll(DB_FIELD, [VLAUE1, VALUE2, VALUE3])
    .find().then(results => {console.log(results);
        let items = results.items; console.log(items);
        return (items);
    }).catch((err)=>{return (err);});
}
  1. If you have to feed two different SlideShows, with different DATA…
let slidesData1 = await getSlideshowDataFromDatabase(DB-FIELD, VALUE, VALUE1, VALUE2, VALUE3);
let slidesData2 = await getSlideshowDataFromDatabase(DB-FIELD, VALUE, VALUE1, VALUE2, VALUE3);
feed_SlideshowWithData(slidesData1, "#HomeSlideFull");
feed_SlideshowWithData(slidesData2, "#AnotherSlideShow");


function feed_SlideshowWithData(slidesData, SlideShowID) {
    const slideElements = $w(SlideShowID).slides;
    console.log("Slide-Elements: ", slideElements);

    for (let i = 0; i < slideElements.length; i++) {
        const slideElement = slideElements[i];
        console.log("Slide-Element: ", slideElement);

        if() { $w('#' + slideElement.id).background.src = slidesData[i].videoHome; }
        else { $w('#' + slideElement.id).background.src = slidesData[i].imageHome; }
    }
}

So I Tried to figure it out, added

function feed_SlideshowWithData(slidesData) {const slideElements = $w("#HomeSlideFull").slides;console.log("Slide-Elements: ", slideElements);for (let i = 0; i < slideElements.length; i++) {const slideElement = slideElements[i];console.log("Slide-Element: ", slideElement);if(slidesData.videoHome) { $w('#' + slideElement.id).background.src = slidesData[i].videoHome; }else { $w('#' + slideElement.id).background.src = slidesData[i].imageHome; }}}

It worked, But not sure if what I did was right.

And yes, if it worked → then it was right :grin:, then you completed the if-else-query the right way.

Hello again,

So I tried looking into it,
What I understood:
Get the values of this function from DB-Field “Value 0 -4”
DB-Field: example “Group”
Value : Group A
Value 1: Group B
etc…

.eq (not sur what it means"

Contains “Group, Group A”
if it inlcludes “either/or”(Group, {Group A, Group B, Group C })
if All included “All” "(Group, {Group A, Group B, Group C })

Search for


function getSlideshowDataFromDatabase(DB-FIELD, VALUE, VALUE1, VALUE2, VALUE3) {
    return wixData.query("ServiceSlides")
    .eq(DB_FIELD, VALUE)
    .contains(DB_FIELD, VALUE)
    .hasSome(DB_FIELD, [VLAUE1, VALUE2, VALUE3])
    .hasAll(DB_FIELD, [VLAUE1, VALUE2, VALUE3])
    .find().then(results => {console.log(results);
        let items = results.items; console.log(items);
        return (items);
    }).catch((err)=>{return (err);});
}

if I understood correctly
That way I filtered that dataset based on a specific or range of items in that I gave him,

What if you want to Filter it from whats under another Database “Services” Field Group
e.g We are in Activity Clubs “Page” → Group C
Filter Service Slides “by Group” —> to match Group C

For the 2nd slideshow, I didn’t get it to work unfortunately

import wixData from 'wix-data';

$w.onReady(async function () {
    let slidesData1 = await getSlideshowDataFromDatabase();
    let slidesData2 = await getSlideshowDataFromDatabase();
    feed_SlideshowWithData(slidesData1, "#HomeSlideFull");
    feed_SlideshowWithData(slidesData2, "#OnlineSlideFull");
    console.log("Slide-Data: ", slidesData1, slidesData2);

});

function getSlideshowDataFromDatabase() {
    return wixData.query("ServiceSlides").find().then(results => {
        return results.items;

    })
}

function feed_SlideshowWithData(slidesData1, "#HomeSlideFull") {
    const slideElements = $w("#HomeSlideFull").slides;
    console.log("Slide-Elements: ", slideElements);

    for (let i = 0; i < slideElements.length; i++) {
        const slideElement = slideElements[i];
        console.log("Slide-Element: ", slideElement);

        if(slidesData1.videoHome) { $w('#' + slideElement.id).background.src = slidesData1[i].videoHome; }
        else { $w('#' + slideElement.id).background.src = slidesData1[i].imageHome; }
    }
}

function feed_SlideshowWithData(slidesData2, "#OnlineSlideFull") {
    const slideElements = $w("#OnlineSlideFull").slides;
    console.log("Slide-Elements: ", slideElements);

    for (let i = 0; i < slideElements.length; i++) {
        const slideElement = slideElements[i];
        console.log("Slide-Element: ", slideElement);

        if(slidesData2.videoHome) { $w('#' + slideElement.id).background.src = slidesData2[i].videoOnline; }
        else { $w('#' + slideElement.id).background.src = slidesData2[i].imageOnline; }
    }
}

Got this error

Thanks again for your patience

Unexpected-Token-Error → Your SYNTAX is wrong.
Check all your OPENING and CLOSING → BRACES/BRACETS

Everytime when you open a → ( or a → [ or a → { → you also have to close it again → } in the right order → ])

If you don’t do that corret → you will get the error you got!

And this one…

function getSlideshowDataFromDatabase(DB-FIELD, VALUE, VALUE1, VALUE2, VALUE3) {
    return wixData.query("ServiceSlides")
    .eq(DB_FIELD, VALUE)
    .contains(DB_FIELD, VALUE)
    .hasSome(DB_FIELD, [VLAUE1, VALUE2, VALUE3])
    .hasAll(DB_FIELD, [VLAUE1, VALUE2, VALUE3])
    .find().then(results => {console.log(results);
        let items = results.items; console.log(items);
        return (items);
    }).catch((err)=>{return (err);});
}

…was just an quick example maden within some seconds.

Of course you will not have to use all the filterings, you will have to decide which one or 2 you will need for your filtering process.

ist it → eq? → equals ?
ist it contains → contains
or another one you need?

If you choose eq than

function getSlideshowDataFromDatabase(DB-FIELD, VALUE) {
    return wixData.query("ServiceSlides")
    .eq(DB_FIELD, VALUE)
    .find().then(results => {console.log(results);
        let items = results.items; console.log(items);
        return (items);
    }).catch((err)=>{return (err);});
}

If you think contains is the better filtering function for your purposes…

function getSlideshowDataFromDatabase(DB-FIELD, VALUE) {
    return wixData.query("ServiceSlides")
    .contains(DB_FIELD, VALUE)
    .find().then(results => {console.log(results);
        let items = results.items; console.log(items);
        return (items);
    }).catch((err)=>{return (err);});
}

The rest of all issues, you will have to do by your own. You got know enough knowledge to solve your problem by your own and i am sure you will get your wished end-result, even if it will take some time, but this is how programming works. → You need time → to generate high-quality codings!

There are 100-ways to upgrade this shown basic code…,
…,but I don’t want to reveal all of my tricks. You will surely understand this.

One day you will reach a coding level → where you will start to find your own style of coding.
You will also go own solution-ways, because you will be able to solve an issue in multiple possible ways. You will even code your own code-packages to work faster and so on… and so on!

Good luck my fried! :wink:

Everything I learned really, was from reading the community problems, see their solutions, try and dissect the code, understand the logic/theory, and reapply in different situations or by merging with the other codes that I learned.
Thanks to you guys, I got to build 2 full members portals and 3 sites. with so many functionalities that I never would have though ill be able to achieve
But specifically for these 2 situations I asked about. couldn’t find an answer anywhere

for the filter you explained me, I didn’t get how to accomplish this setting “where do I add the second database to filter from it”

on editor:

this Is what I’ve been trying to accomplish
looked everywhere, tried to do the exact same but in code , Failed

for the second code with, “Syntax error”

feed_SlideshowWithData (slidesData1,"#HomeSlideFull");
feed_SlideshowWithData (slidesData2,"#OnlineSlideFull");

isn’t the function suppose to be a copy of what this

function feed_SlideshowWithData(slidesData1, "#HomeSlideFull") {
    const slideElements = $w("#HomeSlideFull").slides;
    console.log("Slide-Elements: ", slideElements);

    for (let i = 0; i < slideElements.length; i++) {
        const slideElement = slideElements[i];
        console.log("Slide-Element: ", slideElement);

        if(slidesData1.videoHome) { $w('#' + slideElement.id).background.src = slidesData1[i].videoHome; }
        else { $w('#' + slideElement.id).background.src = slidesData1[i].imageHome; }
    }

function feed_SlideshowWithData(slidesData2,"#OnlineSlideFull") {

YOUR CODE

feed_SlideshowWithData(slidesData1, "#HomeSlideFull");
feed_SlideshowWithData(slidesData2, "#AnotherSlideShow");
function feed_SlideshowWithData(slidesData, SlideShowID) {
    const slideElements = $w(SlideShowID).slides;
    console.log("Slide-Elements: ", slideElements);

    for (let i = 0; i < slideElements.length; i++) {
        const slideElement = slideElements[i];
        console.log("Slide-Element: ", slideElement);

        if() { $w('#' + slideElement.id).background.src = slidesData[i].videoHome; }
        else { $w('#' + slideElement.id).background.src = slidesData[i].imageHome; }
    }
}

I would understand if you gave up on me :grin:

Complete this one…
Pay attention to fill in all neccessary VARIABLES with right VALUES!
USE ALSO → CONSOLE → its your best FRIEND !!! :wink:

let slidesData1 = await getSlideshowDataFromDatabase(DATABASE, DB_FIELD, VALUE); 
console.log("Slide-Show-Data-1: ", slidesData1);
let slidesData2 = await getSlideshowDataFromDatabase(DATABASE, DB_FIELD, VALUE); 
console.log("Slide-Show-Data-2: ", slidesData2);
//---------------------------------------------------------

feed_SlideshowWithData(slidesData1, SlideShowID); 
feed_SlideshowWithData(slidesData2, SlideShowID); 
//---------------------------------------------------------

function getSlideshowDataFromDatabase(DATABASE, DB-FIELD, VALUE) {
    return wixData.query(DATABASE) //<--- Quering in which DATABASE?
    .eq(DB_FIELD, VALUE) //<-- FILTERING in which FIELD? For which VALUE?
    .find().then(results=> {console.log("Results: ", results);
        let items = results.items; console.log("Items: ", items);
        return (items);
    }).catch((err)=>{return (err);});
}
//---------------------------------------------------------

function feed_SlideshowWithData(slidesData, SlideShowID) {
    const slideElements = $w(SlideShowID).slides;
    console.log("Slide-Elements: ", slideElements);

    for (let i = 0; i < slideElements.length; i++) {
        const slideElement = slideElements[i];
        console.log("Slide-Element: ", slideElement);

        if(slidesData.videoHome){
          $w('#'+slideElement.id).background.src = slidesData[i].videoOnline; 
        }
        else {$w('#'+slideElement.id).background.src = slidesData[i].imageOnline;}
    }    
}
//---------------------------------------------------------

Unfortunately, failed again miserably.
Question: are we using

$w.onReady(async function () {
    let slidesData1 = await getSlideshowDataFromDatabase("ServicesSlides", "group");
    console.log("Slide-Show-Data-1: ", slidesData1);
    feed_SlideshowWithData(slidesData1, "HomeSlideFull");
});

function getSlideshowDataFromDatabase("ServicesSlides", "group") {
    return wixData.query("ServicesSlides") //<--- Quering in which DATABASE?
    .eq("group", "Group A") //<-- FILTERING in which FIELD? For which VALUE?
    .find().then(results=> {console.log("Results: ", results);
        let items = results.items; console.log("Items: ", items);
        return (items);
    }).catch((err)=>{return (err);});
}
//---------------------------------------------------------

function feed_SlideshowWithData(slidesData1, "HomeSlideFull") {
    const slideElements = $w("#HomeSlideFull").slides;
    console.log("Slide-Elements: ", slideElements);

    for (let i = 0; i < slideElements.length; i++) {
        const slideElement = slideElements[i];
        console.log("Slide-Element: ", slideElement);

        if(slidesData1.videoHome){
          $w('#'+slideElement.id).background.src = slidesData1[i].videoOnline; 
        }
        else {$w('#'+slideElement.id).background.src = slidesData1[i].imageOnline;}
    }    
}

this where I reached , i’m super lost :sob:

1) You did not pay attention!!!
Your code is UPGRADING every-time → that means it also changes!
Take a look at your last provided code and compare it with this one…

$w.onReady(async function () {
    let slidesData1 = await getSlideshowDataFromDatabase("ServicesSlides", "group", "????");
    console.log("Slide-Show-Data-1: ", slidesData1);
//  let slidesData2 = await getSlideshowDataFromDatabase(DATABASE, DB_FIELD, VALUE); 
//  console.log("Slide-Show-Data-2: ", slidesData2);

    feed_SlideshowWithData(slidesData1, "HomeSlideFull");
//  feed_SlideshowWithData(slidesData2, SlideShowID); 
//---------------------------------------------------------
});

function getSlideshowDataFromDatabase(DATABASE, DB_FIELD, VALUE) {//nothing to change here!
    return wixData.query(DATABASE) //<--- Quering in which DATABASE?
    .eq(DB_FIELD, VALUE) //<-- FILTERING in which FIELD? For which VALUE?
    .find().then(results=> {console.log("Results: ", results);
        let items = results.items; console.log("Items: ", items);
        return (items);
    }).catch((err)=>{return (err);});
}
//---------------------------------------------------------

function feed_SlideshowWithData(slidesData, SlideShowID) {//nothing to change here!
    const slideElements = $w(SlideShowID).slides;
    console.log("Slide-Elements: ", slideElements);

    for (let i = 0; i < slideElements.length; i++) {
        const slideElement = slideElements[i];
        console.log("Slide-Element: ", slideElement);

        if(slidesData.videoHome){
          $w('#'+slideElement.id).background.src = slidesData[i].videoOnline; 
        }
        else {$w('#'+slideElement.id).background.src = slidesData[i].imageOnline;}
    }    
}
//---------------------------------------------------------

Starting from the first lines…your code…–> your VALUES

 let slidesData1 = await getSlideshowDataFromDatabase("ServicesSlides", "group");
    console.log("Slide-Show-Data-1: ", slidesData1);

Did you placed the VALUES the right way?
What do expect the → getSlideshowDataFromDatabase ← function ? Which VALUES ?

Here the original second (not filled one)…

 let slidesData2 = await getSlideshowDataFromDatabase(DATABASE, DB_FIELD, VALUE); 

Did you use your CONSOLE, to investigate the RESULTS of this first process?
Were the RESULTS your expected ones, or did you already got an ERROR after first 1-3 code lines?

  1. You do not have to replace VARIABLES within the FUNCTION itself with VALUES!
    For example here… I will mark the wrong parts, which should NOT have been changed!
function getSlideshowDataFromDatabase("ServicesSlides", "group") {
    return wixData.query("ServicesSlides") //<--- Quering in which DATABASE?
    .eq("group", "Group A") //<-- FILTERING in which FIELD? For which VALUE?
    .find().then(results=> {console.log("Results: ", results);
        let items = results.items; console.log("Items: ", items);
        return (items);
    }).catch((err)=>{return (err);});
}

It should stay originaly like this…

function getSlideshowDataFromDatabase(DATABASE, DB_FIELD, VALUE) {
    return wixData.query(DATABASE) //<--- Quering in which DATABASE?
    .eq(DB_FIELD, VALUE) //<-- FILTERING in which FIELD? For which VALUE?
    .find().then(results=> {console.log("Results: ", results);
        let items = results.items; console.log("Items: ", items);
        return (items);
    }).catch((err)=>{return (err);});
}

The DATA will be pulled from …THIS IS THE PART WHERE TO FILL OUT THE VALUES!

let slidesData2 = await getSlideshowDataFromDatabase(DATABASE, DB_FIELD, VALUE); 

3x - VALUES are expected! → 1) DATABASE 2) DB_FIELD 3) VALUE
I would reccomend you first to bring → ONE Slideshow to work, then dublicate code-lines to generate identical working Slideshow, but with different VALUES/Parameters.

Correct this one…

 let slidesData1 = await getSlideshowDataFromDatabase("ServicesSlides", "group", "????");
  1. From which DATABASE you want to load your items for first Slide-Show?
  2. In which DB-Field should take place the FILTERING?
  3. Which VALUE has to be filtered?