Question:
What would cause the code to work in the console but for the results to not show in the repeater? I’ve checked the repeater ID and it is correct.
This is the code:
import wixData from ‘wix-data’;
$w.onReady(function () {
const alphabet = ‘ABCDEFGHIJKLMNOPQRSTUVWXYZ’.split(‘’);
const letters = alphabet.map(letter => ({
_id: letter,
title: letter
}));
console.log("Letters generated:", letters);
if ($w('#letterRepeater')) {
$w('#letterRepeater').data = letters;
$w('#letterRepeater').onItemReady(($item, itemData) => {
console.log("Letter item data:", itemData);
if ($item('#letterButton') && $item('#letterText')) {
$item('#letterButton').label = itemData.title;
$item('#letterText').text = itemData.title;
$item('#letterButton').onClick(() => showAuthors(itemData.title));
} else {
console.error("Letter button or text element not found in the repeater item.");
}
});
} else {
console.error("Letter repeater not found");
}
});
function showAuthors(letter) {
wixData.query(‘Repository’)
.startsWith(‘author’, letter.toUpperCase())
.find()
.then(results => {
console.log(Results from Repository for letter ${letter}:, results.items);
if (results.items.length > 0) {
const authorsSet = new Set();
results.items.forEach(item => {
const authorsField = item.author;
if (authorsField) {
const authorsList = splitAuthors(authorsField);
console.log(`Authors list for item ${item._id}:`, authorsList);
authorsList.forEach(author => {
const firstAuthorSurname = extractSurname(author);
if (firstAuthorSurname) {
const firstLetter = firstAuthorSurname.charAt(0).toUpperCase();
console.log(`Author: ${author}, FirstLetter: ${firstLetter}`);
if (firstLetter === letter.toUpperCase()) {
authorsSet.add(author);
}
}
});
}
});
console.log(`Authors set for letter ${letter}:`, authorsSet);
const authorsArray = Array.from(authorsSet).sort().map(author => ({
_id: encodeURIComponent(author),
title: author
}));
console.log(`Authors to be displayed in authorRepeater for letter ${letter}:`, authorsArray);
if ($w('#authorRepeater')) {
$w('#authorRepeater').data = authorsArray;
$w('#authorRepeater').onItemReady(($item, itemData) => {
console.log("Author item data:", itemData);
if ($item('#authorButton') && $item('#authorText')) {
$item('#authorButton').label = itemData.title;
$item('#authorText').text = itemData.title;
$item('#authorButton').onClick(() => showAuthorData(itemData.title));
} else {
console.error("Author button or text element not found in the repeater item.");
}
});
$w('#authorRepeater').expand(); // Ensure the repeater is expanded after setting data
$w('#noResultsMessage').collapse(); // Collapse no results message if there are results
} else {
console.error("Author repeater not found");
}
} else {
console.log(`No authors found for letter ${letter}`);
if ($w('#authorRepeater')) {
$w('#authorRepeater').data = [];
$w('#authorRepeater').collapse(); // Collapse repeater if no authors found
}
$w('#noResultsMessage').text = "There are no authors, please select another letter.";
$w('#noResultsMessage').expand(); // Expand no results message
}
})
.catch(err => {
console.error(`Error querying Repository for letter ${letter}:`, err);
});
}
function showAuthorData(author) {
console.log(“Showing data for author:”, author);
wixData.query('Repository')
.contains('author', author)
.find()
.then(results => {
console.log(`Results from Repository for author ${author}:`, results.items);
if (results.items.length > 0) {
const items = results.items.map(item => ({
_id: item._id,
title: item.title,
date: item.date,
author: item.author,
abstract: item.abstract,
type: item.type,
pubMedLink: item.pubMedLink
}));
console.log("Items to be displayed in dataRepeater:", items);
if ($w('#dataRepeater')) {
$w('#dataRepeater').data = items;
$w('#dataRepeater').onItemReady(($item, itemData) => {
console.log("Data item data:", itemData);
if ($item('#title') && $item('#date') && $item('#author') && $item('#abstract') && $item('#type') && $item('#pubMedLink')) {
$item('#title').text = itemData.title;
$item('#date').text = itemData.date.toString();
$item('#author').text = itemData.author;
$item('#abstract').text = itemData.abstract;
$item('#type').text = itemData.type;
$item('#pubMedLink').text = "View Article";
$item('#pubMedLink').link = itemData.pubMedLink;
console.log("Setting pubMedLink:", itemData.pubMedLink);
} else {
console.error("One or more data elements not found in the repeater item.");
}
});
$w('#dataRepeater').expand(); // Ensure the repeater is expanded after setting data
} else {
console.error("Data repeater not found");
}
} else {
console.log(`No data found for author ${author}`);
if ($w('#dataRepeater')) {
$w('#dataRepeater').data = [];
$w('#dataRepeater').collapse(); // Collapse repeater if no data found
}
}
})
.catch(err => {
console.error(`Error querying Repository for author ${author}:`, err);
});
$w('#authorRepeater').collapse(); // Collapse author repeater after clicking on an author
}
function splitAuthors(authorsField) {
return authorsField.split(‘;’).map(author => author.trim());
}
function extractSurname(author) {
const parts = author.split(‘,’);
if (parts.length > 0) {
const surname = parts[0].trim();
return surname.split(‘-’)[0];
}
return null;
}
Product:
Wix Editor
What are you trying to achieve:
I would like the results shown in the array in the console to display in the #authorRepeater. The IDS are all correct and the #authorText is connected to the dataset.
What have you already tried:
I’ve tried tutorials, various tests, tidied the data, double checked the IDs, etc.
Additional information:
The repeater shows the top entry in the dataset, so it is connected to the data, but it is not populating the result shown in the console.