The repeaters are still one of my favorite things in Wix Code. They are super flexible. In this sample I want to show you how to search in two different ways, filter on field with unique values in dropdown and also funny way to randomize your content.
Online demo page:
https://andreaskviby.wixsite.com/newsaboutwix/techcrunch
First of all we do a search using the setFilter on a dataset on our page. As you might see that kind of search is not superfast. Secondly we store the items in Session Storage and just perform our search in memory on the items. That is extremely faster if you test it. My sample is not perfect in any way.
Then we take all items and grab the unique ones, this is code snatched from Wix team post here on the forums and works great. Then finally we randomize all items in our repeater for fun and this can be used to make pages look updated or something.
All code is below:
// Code made partially by Andreas Kviby and also by Wix Team on forum
import wixData from 'wix-data';
import {session} from 'wix-storage';
let searchWord = "";
let theContent;
let jsonContent;
export function saveObject(key,value) {
session.setItem(key, JSON.stringify(value));
return true;
}
export function getObject(key) {
return JSON.parse(session.getItem(key));
}
export function clearSession() {
session.clear();
}
// Re connect repeater to data
async function updateRepeater(){
$w("#repeater1").forEachItem( ($w, itemData, index) => {
let year;
if (!itemData.Year) {
year = "";
} else {
year = itemData.Year.toString();
}
$w("#image1").src = itemData.urlToImage;
$w("#text34").text = itemData.title;
$w("#text35").text = itemData.publishedAt;
$w("#text36").text = itemData.description;
$w("#text33").text = itemData.author;
$w("#text32").text = itemData.source;
});
}
$w.onReady(async function () {
//TODO: write your page related code here...
$w("#dataset1").onReady(async() => {
jsonContent = $w("#repeater1").data;
await saveObject("contentData",jsonContent);
await updateRepeater();
});
console.log("Dataset is ready!");
fixDropdown();
});
// Function that will shuffle items and return the same array
function shuffle(items) {
var currentIndex = items.length, temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = items[currentIndex];
items[currentIndex] = items[randomIndex];
items[randomIndex] = temporaryValue;
}
return items;
}
// Fix dropdown
function fixDropdown() {
$w("#dataset2").onReady(() => {
let dropdownValues = [];
dropdownValues = $w('#sourceDropdown').options;
const uniqueTitles = getUniqueTitles(dropdownValues);
$w("#sourceDropdown").options = buildOptions(uniqueTitles);
});
}
// Get unique titles for drowdown
function getUniqueTitles(items) {
// Use the map method to create the titlesOnly object containing all the titles from the query results
const titlesOnly = items.map(item => item.label);
// Return an array with a list of unique titles
return [...new Set(titlesOnly)];
}
// Creates an array of objects in the form {label: "label", value: "value"} from the array of titles
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
// Use the map method to build the options list in the format {label:uniqueTitle, value:uniqueTitle}
return {label:curr, value:curr};
});
}
// Filter on dropdown change
export function sourceDropdown_change(event, $w) {
$w('#dataset1').setFilter(wixData.filter().eq('source',$w("#sourceDropdown").value));
}
// Randomize all items and hook them back to repeater
export function randomizeButton_click(event, $w) {
let repeaterItems = $w('#repeater1').data;
$w('#repeater1').data = shuffle(repeaterItems);
}
// If key pressed in standard search box
export function searchBox_keyPress(event, $w) {
$w('#dataset1').setFilter(wixData.filter().contains('title',$w("#searchBox").value));
}
// If key pressed in sessionSearchBox
export async function searchSessionBox_keyPress(event, $w) {
//User pressed a key
console.log("Current search:" + searchWord + event.key);
if (event.key.length > 1) {
if (event.key === "Backspace") {
// If backspace is typed, delete from end in string
searchWord = searchWord.substring(0, searchWord.length-1);
} else if (event.key === "Enter") {
} else {
console.log("Other keys:" + event.key);
}
}
else if (event.key.length === 1) {
// Add typed letter to searchWord variable
searchWord += event.key;
}
let filterRecords = await searchRecords(searchWord,jsonContent);
await fillRepeater(filterRecords);
console.log("Current search:" + searchWord);
}
// Fill repeater with content
export async function fillRepeater(newContent){
$w("#repeater1").data = newContent;
}
// Search after keywords in title field in objects
export async function searchRecords(query, objects) {
let searchResults = [];
query = query.toLowerCase();
for (var i = 0; i < objects.length; i++){
// look for the entry with a matching `Title` value
if (objects[i].title.toLowerCase().indexOf(query) !== -1 ){
searchResults.push(objects[i]);
}
}
return await searchResults;
}
Happy coding with Wix Code!