Showing Values from Collection in Repeaters - Code Stopped Working

Dean was asking you about the DATASET not out of nowhere.
Normaly you should first wait for the DATASET to be ready first when you are interacting with Wix-Data → (Mixing Wix-Data+CODE and an already setted-up DATASET).

In none of provided codes i could find something like…

//Importing the neccessary libraries... (in your case wix-data)
import wixData from 'wix-data';

// This code is executed when the page is ready
$w.onReady(async()=> {
    $w('#myDataset').onReady(()=>{
        //...
        // ...your CODE here...
        //...
    });
});

This makes sure that your code will only start acting after both (PAGE & DATASET) are → READY! This is one of first biggest mistakes what is always done by a ongoing wix-coder.

Also why not first make things clear by making some clear definitions of what is what, generating a → USER-INTERFACE <—, like …

It looks like your main problem is the switch from dataset-based-setup → to a mixed-setup using dataset and wix-data (coding).

import wixData from 'wix-data';
// This code is executed when the page is ready

//Integrated USER-INTERFACE...
//xxxxxxxxxxxxxxxxxx [USER-INTERFACE] xxxxxxxxxxxxxx
const DATASET = "define your dataset here";
const DATABASE = "define your database here";
const FIELD = "define your field here";

//You could define maybe even more, depending on your setup, like this:
const VALUE = "define your value here";
const FILTER = "define your filter here";
const FILTERVALUE = "define your filter value here";
const FILTERFIELD = "define your filter field here";
//...and so on and so on....
//xxxxxxxxxxxxxxxxxx [USER-INTERFACE] xxxxxxxxxxxxxx

Ok, once done all your DEFINITIONS and DECLARATIONS, you now can continue with your code, using them…

$w.onReady(()=> {console.log('I am the page and i am ready now, but is the dataset also already --> READY ???');        
    
    $w(`#${DATASET}`).onReady(async()=>{console.log('I am the dataset and i am ready now...');        
        
        // DATA-PART --> Let us first retrieve your data from the database and then we can use it in the repeater (we do not forget to use the async/await pattern here).
        const myDataQuery = await wixData.query(DATABASE).find(); console.log('myDataQuery: ', myDataQuery); 
        
        // REPEATER-PART...
        $w(`#${REPEATER}`).onItemReady(($item, itemData, idex) => {console.log('Item-Data: ', itemData); // Log the itemData to see its structure.  
            // Check if itemData is defined and is not null...
            if(itemData) {console.log('Item-Data is defined and not null...');
                // Check if itemData has a location property...
                if (itemData[FIELD]) { console.log('Item-Data has a location property...');
                    // Get the location data from itemData...
                    const mapLocation = itemData[FIELD]; // Assuming itemData has a mapLocation property.  FIELD = "mapLocation", defined above.
                    // Going the more simple way... instead of ---> const { city, state, country } = itemData.mapLocation; // Deconstruction
                    const city = mapLocation.city; // Assuming mapLocation has a city property.
                    const state = mapLocation.state; // Assuming mapLocation has a state property.
                    const country = mapLocation.country; // Assuming mapLocation has a country property.
                    // Not $w, so it only targets the specific repeater occurence --> (Wix-RULE: OUTSIDE of REPEATERS => $w and INSIDE of REPEATERS => $item)
                    $item('#txtElemntCity').text = `${city}`; // This will show CITY in one of the appropirate text elements.
                    $item('#txtElemetState').text = `${state}`; // This will show STATE in one of the appropirate text elements.
                    $item('#txtElementCountry').text = `${country}`; // This will show COUNTRY in one of the appropirate text elements.
                    $item('#txtElementAlltogether').text = `${city}, ${state}, ${country}`; // This will show the full address in just one text appropirate elements.
                } else {console.log('Item-Data does not have a location property...');}  
            } else {console.log('Item-Data is not defined or null...');} // If itemData is not defined or null, do nothing.
        });
        
    });

});

But looks like something is still missing! What could it be?

Also check if all your ELEMENT-IDs are correct regarding the provided code!
Either adjust the code, or your IDs accordingly.

NO! NOT THE CODE → BECAUSE YOU HAVE NOW YOUR → USER-INTERFACE !!!
THE USER-INTERFACE IS NOW THE AREA FOR MAKING CHANGES, REGARDING YOUR VALUES & IDs!!! :upside_down_face:

USE MORE → CONSOLE-LOGS and check them inside of your → CONSOLE!
THIS WAY YOU WILL UNDERSTAND YOUR OWN CODE BETTER !!!

Almost, FULL-CODE…

import wixData from 'wix-data';

//xxxxxxxxxxxxxxxxxx [USER-INTERFACE] xxxxxxxxxxxxxx
const DATASET = "myDatasetID"; // the name of your dataset, which you still did not mention in this context !!!
const DATABASE = "Properties"; // the name of your database, which is in your case --> PROPERTIES !!!
const REPEATER = "myRepeaterID"; // the name of your repeater, which you still did not mention in this context !!!
const FIELD = "mapLocation"; // the name of your field, in your case --> mapLocation !!!
//xxxxxxxxxxxxxxxxxx [USER-INTERFACE] xxxxxxxxxxxxxx


$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); 
        // REPEATER-PART...
        $w(`#${REPEATER}`).onItemReady(($item, itemData, idex) => {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.state;
                    const country = mapLocation.country;
                    $item('#txtElemntCity').text = `${city}`;
                    $item('#txtElemetState').text = `${state}`;
                    $item('#txtElementCountry').text = `${country}`;
                    $item('#txtElementAlltogether').text = `${city}, ${state}, ${country}`;
                } else {console.log('Location-Property NOT found!');}  
            } else {console.log('Item-Data is not defined or null...');}
        });
    });
});

Complete the code…

And next time also provide some data-example from your setup, like…

{
  "_id": "12345",
  "title": "Cool Engineering Project",
  "description": "An AI-powered project.",
  "location": true, // Possibly just a flag to show there's a location
  "mapLocation": {
    "city": "San Francisco",
    "state": "CA",
    "country": "USA",
    "latitude": 37.7749,
    "longitude": -122.4194
  },
  "image": "wix:image://v1/abcd.jpg/project.jpg#originWidth=1024&originHeight=768"
}

This can speed up everything!

Further steps, where you should do some → BRAINSTORMING on!

  1. Why the code is still not complete? → What part is missing?
  2. Would it make sense to use a separate RETURN-FUNCTION for DATA-QUERY? → (UPGRADE) → What would be the benefit?
  3. What is the benefit of the → USER-INTERFACE ← (already mentioned above) :laughing:
  4. Should i maybe pay more attention in my future, when mixing Wix-Data with a DATASET connected setup?
  5. Do i have 2 different DATABASES involved in my setup?
  6. Did i really mention my whole setup in detail?

EDIT: The following can be also written like …

$item('#txtElemntCity').text = city;
$item('#txtElemetState').text = state;
$item('#txtElementCountry').text = country;
$item('#txtElementAlltogether').text = `${city} / ${state} / ${country}`;
1 Like