Showing Values from Collection in Repeaters - Code Stopped Working

Ok, maybe i misunderstood your requirement.
My assumtion and interpretation were wrong in this case.

With USER-INTERFACE i meant the code-block where you do define/declare your variables.

Not everyone uses that technique to generate some kind of decoupling of main-code,
instead pushing everything into the code, which makes the code clucky, loosing flexibility and modularity.

So you easely could present your code even without mentioning your USER-INTERFACE…

$w.onReady(()=> {console.log('PAGE-READY...');        
    $w(`#${DATASET}`).onReady(async()=>{console.log('DATASET READY...');
        const myDataQuery = await wixData.query(DATABASE).find(); console.log('myDataQuery: ', myDataQuery); 

        $w(`#${REPEATER}`).onItemReady(($item, itemData, index) => {console.log('Item-Data: ', itemData);
            if(itemData) {console.log('Item-Data found!');
                if (itemData[FIELD]) { console.log('Location-Property found!');
                    const mapLocation = itemData[FIELD];
                    const city = mapLocation.city;
                    const state = mapLocation.subdivision;
                    const country = mapLocation.country;
                    $item('#collapsibleText').text = `${city}, ${state}, ${country}`;
                } else {console.log('Location-Property NOT found!');}      

                //*displaying from tags field
                if (itemData[FIELD2]) { console.log('Species-Property found!');
                    const species = itemData[FIELD2];
                    $item('#collapsibleText3').text = `${species}`;
                } else {console.log('Species-Property NOT found!');}      
                                          
            } else {console.log('Item-Data is not defined or null...');}                      
        });
    });
});

And i would still be capable to read your code easely.

The more systematic you generate your codes, the better and easier it will be to read and understand code.

And well done, you solved the issue on your own! :ok_hand:
const subjects = itemData[FIELD2].join(", ");

The method you have used, is called → AGGREGATION

Here a summary of all similar methods you can do on ARRAYS…

:scroll: JavaScript Array Methods — Cheat Sheet


1. :puzzle_piece: Aggregation (array → single value)

Method Purpose
reduce() Collapse array into one value (number, object, string, etc.).
reduceRight() Same as reduce(), but right-to-left.
join() Combine array into a single string with a separator.
toString() Turn array into a comma-separated string.

2. :artist_palette: Transformation (array → modified array)

Method Purpose
map() Transform each item into something new (returns a new array).
flatMap() Like map(), but flattens one level deep automatically.

3. :scissors: Filtering (select some items)

Method Purpose
filter() Keep only items that match a condition (new array).

4. :magnifying_glass_tilted_right: Searching (find specific items)

Method Purpose
find() Find the first matching item.
findIndex() Find the index of the first matching item.
includes() Check if array contains a value.
indexOf() Find the index of a value (or -1 if not found).

5. :broom: Mutation (change the array itself)

Method Purpose
push() Add to end.
pop() Remove from end.
shift() Remove from start.
unshift() Add to start.
splice() Add/remove items anywhere.
sort() Sort the array in-place.
reverse() Reverse the array in-place.

6. :scissors: Extraction (copy parts)

Method Purpose
slice() Copy a portion (doesn’t change original).
filter() Also works as extraction (select items by condition).

7. :repeat_button: Iteration (looping over items)

Method Purpose
forEach() Run a function on every item (no return).
for...of Loop through array values easily.
for loop Classic loop over indexes.

8. :test_tube: Checking (testing conditions)

Method Purpose
every() Check if all items pass a test.
some() Check if at least one item passes a test.

9. :building_construction: Structure Modification

Method Purpose
flat() Flatten nested arrays.
flatMap() Map and flatten together.
fill() Fill array with static values.
copyWithin() Copy part of the array to another position in the same array.

:high_voltage: Super-Short Memory Tips:

Category Key verbs
Aggregation “Collapse”
Transformation “Change”
Filtering “Select”
Searching “Find”
Mutation “Modify”
Iteration “Loop”
Checking “Test”

:white_check_mark: Now you can quickly see what any array method is mainly used for!
:white_check_mark: Fast memory trick: Aggregation = One Value.
:white_check_mark: If it returns a new array → it’s transformation or filtering.

1 Like