Hi,
How can I add serial numbers in a repeater?
Thanks.
Hi,
How can I add serial numbers in a repeater?
Thanks.
What is a serial number?
Sorry, I meant sequence number. If there are ten items in the repeater each line should be numbered 1, 2, 3 etc.
My repeater displays items from a database based on user inputs and hence the number of items changes.
Add a text element to the repeater element.
And use this code:
$w.onReady(() => {
$w("#repeater1").onItemReady($i, iData, index) => {
$i("#text1").text = (index + 1).toString();
})
})
Awesome, it worked.
You’re welcome
Thank u
This should ideally work, but in my case the text element in the repeater shows the same number ‘1’ for all the repeater items, even after I have inserted this code.
P.S. I have entered the correct repeater ID and Text element ID.
Check your code…
You are sure, that you have something like this… ( GOOD ) !!!
$w.onReady(() => {
$w("#repeater1").onItemReady($item,iData,index)=>{
$item("#text1").text = (index + 1).toString();
});
});
And not something like that… (WRONG) !!!
$w.onReady(() => {
$w("#repeater1").onItemReady($item,iData,index)=>{
$w("#text1").text = (index + 1).toString();
});
});
If still not working you can try this one…
$w.onReady(() => {
$w("#repeater1").forEachItem($item,iData,index)=>{
$item("#text1").text = (index + 1).toString();
});
});
How to test it?
Generate a simple REPEATER-DATA-BLOCK…
let data = [
{"_id": "1", "title": "xxx"},
{"_id": "2", "title": "yyy"},
{"_id": "3", "title": "zzz"}
];
This simply and manually generated REPEATER-data-block will represent the REPEATERS - - → ITEMS. 3 at total.
Loading the data into repeater…
$w("#repeater1").data = data;
OnItemReady-Sequence of the repeater will show us the RESULTS inside -------------> CONSOLE.
$w("#repeater1").onItemReady(($i,iData,index) => {
console.log((index + 1).toString());
});
So the provided code above seems to be totally ok!
Since the code was generated and provided by a VELO-MASTER - → i never expected something else
Oh! Forgot to show the RESULTS…
Maybe you used $w instead of $i
@J.D. @russian-dima
‘Cannot find name $item’ is the error shown on hovering over the code. Similarly for itemData and index. I have checked and the element IDs are correct.
My repeater is connected to a database (collection) to display a list of all publications in academic journals. I want the displayed list to be numbered dynamically, as I plan to filter the list by YEAR of publication.
I wonder what the issue is!
Would be great if you could help me out with this one. Thanks.
P.S. I am new to Wix, so please excuse me if my issue seems silly.
Find the ERROR …
$w("#rep").forEachItem(($item, itemData, index)=>{...
Next time - → just COPY & PASTE - → to make sure, that you do not add new ----------> SYNTAX-ERRORS into your CODE
Compare it with my (J.D.'s) provided CODE —>
$w("#repeater1").onItemReady(($i,iData,index)=>{
Both used → (( and not just one → ( ← to open the forEach-method.
Thanks!
I had missed an opening parenthesis ( after forEachItem, when I directly pasted the code from earlier replies.
The errors in the code did go away, but my numbering is still not displayed though. The text element in the repeater items still shows the default “I’m a paragraph. Click here to add your own text and edit me. It’s easy.” after running the code.
Maybe I’m still missing something crucial.
Yes you do!
$item("#text1").text = (index+1).toString();
How do you load the items into your repeater?
There is no code for it!
I assume you are using → DATASET ?
Yes, I’m using a Dataset and Connect option that comes along with the repeater.
However, this particular textbox I have not connected to any field in the dataset, though being inside the repeater.
Does the numbering code not work if DATASET is used? I’m not aware.
Can you suggest a possible solution please.
I now used onItemReady instead of forEachItem and IT WORKED!!
Thank you so much @russian-dima for the timely help.
Everytime the same mistakes (again and again and again) !!!
Never try to mix working on the PROPERTIES-PANEL of a DATASET and mix them with CODE - →
!!! THIS WILL END IN CHAOS —> ESPECIALLY IF YOU ARE A BEGINNER !!!
Surely a solution can be found for every issue, but this solution will be very tricky. At the end just GO THE CODING WAY and do not use PROPERTY-PANEL of the DATASET.
Working with DATASET by using settings inside DATASET’s.PROPERTY-PANEL you will face - - → BOUNDARIES.
To remove such boundaries at the end you will start to use code and for sure wix-data-api.
So everythign ends like always → You will have to start from beginning and generating all by code, if you need a specific function.
All examples above —> DO NOT USE —> DATASET !!!
If one the shown examples would use a dataset, you would see something like this inside the example-code…
$w('#dataset1').onReady(()=>{..............});
But if you still want to go the MIXED-VERSION…
FIRST-STEP:
let firstItemIndex = 0; //<--define first index
let numberOfItems = 20; //<--define number of items (dynamically) here
$w.onReady(()=> {
$w("#dataset1").onReady( () => {
$w("#dataset1").getItems(firstItemIndex, numberOfItems)
.then((result) => {
let items = result.items;
let totalCount = result.totalCount;
let offset = result.offset;
})
.catch((err) => {
let errMsg = err.message;
let errCode = err.code;
});
});
});
So now you are ready to load your repeater manually again, after your repeater was already loaded automatically by the dataset-connection.
You need the second REPEATER-RELOAD, to be able to use the automated INDEXING…
let firstItemIndex = 0;
let numberOfItems = 20;
$w.onReady( () => {
$w("#dataset1").onReady( () => {
$w("#dataset1").getItems(firstItemIndex, numberOfItems)
.then((result) => {
$w("#repeater1").data = [];
let items = result.items;
let totalCount = result.totalCount;
let offset = result.offset;
$w("#repeater1").data = items;
});
.catch( (err) => {
let errMsg = err.message;
let errCode = err.code;
});
});
$w("#repeater1").onItemReady($i,iData,i)=>{
$i("#text27").text=(i+1).toString();
});
});
Pay attention when the repeater is ready!
But good to know that it worked.
EDIT:
I did not test my version, maybe you can test it aswell, just curious to know end-result.