When I preview my website, I get this error message: Wix code SDK Warning: The text parameter of "optionText" that is passed to the text method cannot be set to null or undefinedI am trying to make a search bar and filter menu correspond with a set of documents. The code appears to be buggy at line 11 according to the error message
11:
$item("#optionText").text = itemData.value;
Here is what the entire set of code looks like
import wixData from "wix-data";
let lastFilterTopics = [];
$w.onReady(() => {
// handle each suggestion repeater item
$w("#continents").onItemReady(($item, itemData, index) => {
$item('#optionCheckbox').onChange(() => {
filterByCheckboxes()
})
$item("#optionText").text = itemData.value;
});
loadContinents();
});
function loadContinents() {
wixData.query('Continents')
.find()
.then(results => {
$w("#minutes").data = [];
// Create and map an array for the dropdown menu options
let continentDropdownOptions = [];
continentDropdownOptions.push(...results.items.map(continent => {
return { "_id": continent._id, "value": continent.title, "label": continent.title };
}));
$w('#minutes').data = continentDropdownOptions;
});
}
// Filtering per options checked
function filterByCheckboxes() {
let continents = [];
$w("#continents").forEachItem(($item, itemData, index) => {
if ($item('#optionCheckbox').checked) {
continents.push($item("#optionText").text);
}
});
filter(continents);
$w('#numContinentsText').text = `${continents.length} continent${((continents.length > 1) ? "s " : " ")} selected.`;
}
// Collapse or expand the multi-select menu on click
export function continentBox_click(event) {
if ($w('#continents').collapsed === true) {
$w("#continents").expand();
} else {
$w("#continents").collapse();
}
}
function filter(continents) {
let newContinentsFilterCheck = compareArrays(continents, lastFilterContinents);
if (!newContinentsFilterCheck) {
let newFilter = wixData.filter();
newFilter = newFilter.hasSome('continent', continents);
$w('#dataset1').setFilter(newFilter).then(function () {
let count = $w("#dataset1").getTotalCount();
});
lastFilterContinents = continents;
}
}
// Code to compare string arrays
// Used to compare the current and previous continent selections
function compareArrays(newFilterArray, lastFilterArray) {
if (newFilterArray.length !== lastFilterArray.length) { return false } //Checking if the number of items in the filter arrays match
//Sort both arrays for easy comparison and checking if the items match
let sortedNewFilterArray = newFilterArray.concat().sort()
let sortedLastFilterArray = lastFilterArray.concat().sort()
for (let index in sortedNewFilterArray) {
if (sortedNewFilterArray[index] !== sortedLastFilterArray[index]) return false
}
return true
}
Hi Tess,
If it's null in the collection, a dataset or query result applied to the repeater does not include that field in the itemData array. Adding a condition that tests for there actually being a value for itemData.value will solve the problem.
if (itemData.value){ $item("#optionText").text = itemData.value; }