Hello there ! I am kinda new to the Velo coding / javascript in general and I am trying to re-create this tutorial → Velo Tutorial: Creating an Expanding Mega Menu | Help Center | Wix.com
Without the second menu (only a main menu and a strip with the items like attached screenshot). But sadly after having created the databases I am getting the error cannon read properties of undefined (reading ‘filter’) (line 36). What can I do to fix this and complete this tutorial ? Thank you in advance
// The code in this file will load on every page of your site
//-------------Imports-------------//
import wixData from 'wix-data';
//-------------Global Variables-------------//
//Number of Submenu 2 repeaters.
const subLevel2RepeaterCount = 5;
//Object containing all menu data from subTitles database collection.
let menuData;
$w.onReady(async () => {
//Get the menu data from the collection.
menuData = await wixData.query("SubTitlesCollection").find().then(result => result.items);
//Set up each Submenu 2 repeater as it is loaded.
for (let i = 1; i <= subLevel2RepeaterCount; i++) {
$w(`#repeaterSubSub${i}`).onItemReady(($item, itemData, index) => {
//Get the repeater button from its ID.
const repeaterButton = $item(`#buttonSubLevelTwo${i}`)
//Set the item label.
repeaterButton.label = itemData.label;
console.log(repeaterButton);
//Set the item link.
repeaterButton.link = itemData.url;
});
}
});
export function mainMenuButton_mouseIn(event) {
//Get the ID of the Submenu 1 button the mouse hovers over.
const selectedRootId = event.context.itemId;
//Get all the data of the Submenu 2 related to Submenu 1.
const repeaterData = menuData.filter(item => item._id === selectedRootId)[0];
//Set up the box element corresponding to the selected button in Submenu 2.
setSubSubMenu(repeaterData);
//Show the Submenu 2 box.
$w('#megaMenuStrip').expand();
}
/**
* Adds an event handler that runs when the mouse pointer is moved
off of the element.
You can also [define an event handler using the Properties and Events panel](https://support.wix.com/en/article/velo-reacting-to-user-actions-using-events).
[Read more](https://www.wix.com/corvid/reference/$w.Element.html#onMouseOut)
* @param {$w.MouseEvent} event
*/
export function mainMenuRepeater_mouseOut(event) {
}
/**
* Sets the function that runs when a new repeated item is created.
[Read more](https://www.wix.com/corvid/reference/$w.Repeater.html#onItemReady)
* @param {$w.$w} $item
*/
export function mainMenuRepeater_itemReady($item, itemData, index) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
//Set up each item in the Submenu 1 repeater as it is loaded.
$item('#buttonSub').label = itemData.subTitles;
}
function createUniqueId() {
//Creating a Unique Id for each of the menu sub-items by getting the current millisecond and adding a random number from 1 to 1000
let id = String(+new Date() + Math.floor(Math.random() * 1000))
return id;
}
function setSubSubMenu(repeaterData) {
//Set the image of the Submenu 1
//$w('#rangeMenuImage').src = repeaterData.img1;
for (let i = 1; i <= subLevel2RepeaterCount; i++) {
//Convert the Submenu 2 string to a Javascript object.
const dataSubSub = JSON.parse(repeaterData[`subSubItems${i}`]);
console.log(dataSubSub);
//Set a unique ID for each item.
dataSubSub.forEach(subSubItem => {
subSubItem._id = createUniqueId();
})
//Set the Submenu 2 data in the repeater.
$w(`#repeaterSubSub${i}`).data = dataSubSub;
}
}
/**
* Adds an event handler that runs when the mouse pointer is moved
off of the element.
You can also [define an event handler using the Properties and Events panel](https://support.wix.com/en/article/velo-reacting-to-user-actions-using-events).
[Read more](https://www.wix.com/corvid/reference/$w.Element.html#onMouseOut)
* @param {$w.MouseEvent} event
*/
export function megaMenuStrip_mouseOut(event) {
$w('#megaMenuStrip').collapse();
}
