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! ![]()
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…
JavaScript Array Methods — Cheat Sheet
1.
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.
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.
Filtering (select some items)
| Method | Purpose |
|---|---|
filter() |
Keep only items that match a condition (new array). |
4.
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.
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.
Extraction (copy parts)
| Method | Purpose |
|---|---|
slice() |
Copy a portion (doesn’t change original). |
filter() |
Also works as extraction (select items by condition). |
7.
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.
Checking (testing conditions)
| Method | Purpose |
|---|---|
every() |
Check if all items pass a test. |
some() |
Check if at least one item passes a test. |
9.
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. |
Super-Short Memory Tips:
| Category | Key verbs |
|---|---|
| Aggregation | “Collapse” |
| Transformation | “Change” |
| Filtering | “Select” |
| Searching | “Find” |
| Mutation | “Modify” |
| Iteration | “Loop” |
| Checking | “Test” |
Now you can quickly see what any array method is mainly used for!
Fast memory trick: Aggregation = One Value.
If it returns a new array → it’s transformation or filtering.
