Text box showing Country, State and City from Address field in collection

Ask the community
, , , ,
1

Question:
Text box needs to show Country, State and City from Google Location object field in collection

Product:
Wix Editor

What are you trying to achieve:
I want a text box & a collapsible text box to show Country, State & City values from a collection’s Address field (Google Location object)

What have you already tried:
Something like the following was used in a different use case, to retrieve such values for a dropdown

async function getCities() {
    const state = $w("#statesDropdown").value;
    const listingsQueryResult = await wixData.query("Properties")
        .eq("mapLocation.subdivision", state)
        .distinct("mapLocation.city");
    return listingsQueryResult.items;
}

Additional information:
API reference: Data Types in Wix Data

2

I managed to make it work using wixData.query

import wixData from 'wix-data';

$w.onReady(async function () {
    const result = await wixData.query("test").find();
    if (result.items.length > 0) {
        const item = result.items[0];
        const location = item.object;

        if (location) {
            const country = location.country;
            const state = location.subdivision;
            const city = location.city;

            $w("#countryTextBox").text = `Country: ${country}`;
            $w("#stateTextBox").text = `State: ${state}`;
            $w("#cityTextBox").text = `City: ${city}`;
        }
    }

    $w("#expandButton").onClick(() => {
        $w("#collapsibleBox").expand();
        $w("#expandButton").hide();
        $w("#collapseButton").show();
    });

    $w("#collapseButton").onClick(() => {
        $w("#collapsibleBox").collapse();
        $w("#collapseButton").hide();
        $w("#expandButton").show();
    });
});

just replace object in ‘item.object’ with the id of the object field in your collection. As well as the field names (country, state, city) to make sure they match your object. In my example I used country, city, subdivision.

Confirmed it pulled the location data from the collection successfully:

image
image349×380 7.49 KB

If you need any help putting it together on your site you’re welcome to reach out!

3

That was fantastic! Thank you 10,000

1 Like