Modify code displaying Location for a Dynamic Item page

Ask the community
, , , ,
1

Background: Text box displays Country, State etc from Google Location object field in collection. The following code works for a collapsible text box, in a repeater, on a Dynamic List page.

Question: How do I modify the code to work in a regular text box, just on a Dynamic Item page? (no repeater)

Text box in Dynamic Item Page
Text box in Dynamic Item Page645×306 37.1 KB

import wixData from 'wix-data';

/////////// [USER-INTERFACE] //////////////
const DATASET = "listingsDataset";
const DATABASE = "Properties"; 
const REPEATER = "propertiesRepeater"; 
const FIELD = "mapLocation"; 
/////////// [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); 
        // REPEATER-PART...
        $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('#collapsibleText2').text = `${city}, ${state}, ${country}`;
                } else {console.log('Location-Property NOT found!');}  
            } else {console.log('Item-Data is not defined or null...');}
        });
    });
});

I’m aware of substituting the dataset, but clueless about the rest

Thank you!

2

just change this to the id of the text element used.

3

Sorry I didn’t understand, can you please elaborate? I’m not a coder
Is the error because of the repeater line?

Screenshot 2025-06-30 081303
Screenshot 2025-06-30 081303815×497 27.1 KB

4

What does the error say ?

5

I meant the red line in the code ‘onItemReady’

6

yes, what does the error say when hovering over it ?

7

Oh sorry. It says “Property ‘onItemReady’ doe not exist on type ‘ColumnStrip’”

8

I went through the api reference to find an equivalence. Tried gpt too. pulling hairs😓

9

but you said the code was working in the original post. What has changed for it to not work apart from the textbox ?

10

The differences are as follows;

Works for a collapsible text box, in a repeater, on a Dynamic List page.
Does not work for a regular text box, just on a Dynamic Item page (no repeater)

11

That is why you are getting the error. you are calling onItemReady for a repeater that does not exist.

this is the original code changed


$w.onReady(() => {
  $w("#listingsDataset").onReady(() => {
    const item = $w("#listingsDataset").getCurrentItem();
    
    if (item.mapLocation) {
      const { city, subdivision: state, country } = item.mapLocation;
      
      $w("#collapsibleText2").text = `${city}, ${state}, ${country}`;
    } else {
      $w("#collapsibleText2").text = "Location not available";
      console.warn("mapLocation field is empty for this item.");
    }
  });
});
12

Worked like a charm. And such clean code! Thank you so much❤️
Will support in any way I can!

1 Like
13

Glad it worked for you @Gideon_Skarzgard