Auto Complete Address

[Daniella]

I am working on an address where I need to use the autocomplete address feature. I watched Roberto’s video on using the Fetch URL with the “Construct Column.” What am I supposed to add to the parameter to link it to my Geoapify API key? Lastly, I can’t seem to find the Fetch JSON Column in my data editor (I am on the paid plan). Is there any alternative to this?

[Eric_Penn]

FETCH JSON no longer exists. Instead use a JavaScript column and replace p1 with the Fetch URL column.

const response = await fetch(p1);
const data = await response.json();

// Extracting the formatted fields and joining them with a pipe separator
const formattedResults = data.results.map(result => result.formatted).join('|');

// Returning the formatted results
return formattedResults;

[Daniella]

Thanks for this, i notice my JavaScript column isn’t bringing any value, I’d like to provide a breakdown of how I approached this issue. Here’s how I set it up:

1. Fetch URL Template Column: I created a column named “Fetch URL Template” where I used the Template ID to combine the API key from the Geopify app.
2. Fetch URL Column: Next, I created another column named “Fetch URL” using a Java computed column. For the Query parameters:

• I set the text to the input address, which will be stored.
• I configured the API settings to “Custom” and manually entered “YOURAPIKEY”.
• For the format, I also set it to “Custom” and manually typed “json”.

3. Fetch JSON Column: I created a column named “Fetch JSON” using a Java column. I wrote the following code: // Fetch the URL from the Glide column
   const fetchURL = FetchURL; // FetchURL is the column name in Glide containing the URL

// Fetch data from the URL
const response = await fetch(fetchURL);
const data = await response.json();

// Extract the formatted fields and join them with a pipe separator
const formattedResults = data.results.map(result => result.formatted).join(‘|’);

// Return the formatted results
return formattedResults;
and lastly i set he p1 to = fetchURL

[Eric_Penn]

You don’t need the template column and the construct URL just one of them.

Here’s my approach with the construct URL column

1. Construct URL. In the construct URL column you need to replace ‘YOURAPIKEY’ with your actual api Key from geoapify.

2. JavaScript column. Use the code I provided and point p1 at the construct url column.

3. Split Text. Add a split text column with single pipe | for the split by and target the JavaScript column.

[Daniella]

Thank you very much for the feedback. Lastly, regarding the “Construct URL” column, I set the format to JSON. Is it supposed to be set to any specific value? What I did was use the custom mode and manually entered it that way.

[Eric_Penn]

@Daniella

What I did was use the custom mode and manually entered it that way.

This is the correct way to do it. If anything I would use lowercase json.

Were you able to get it working?

[Daniella]

i am still working on it, only that i am seeing this error message on the Javascript and i don’t know if that is normal: Function Error “ReferenceError: fetchURL is not defined”

[Eric_Penn]

I think the error is because you modified the code and replaced the text p1 with the text fetchURL. The JavaScript column Natively looks for the text p1, p2 and p3 in our code and then replaces p1, p2 and p3 with the drop downs below.

Here you could copy the code again and then in the drop down menu for p1 choose fetchURL column. Do NOT change the code… just the drop down menu for p1

const response = await fetch(p1);
const data = await response.json();

// Extracting the formatted fields and joining them with a pipe separator
const formattedResults = data.results.map(result => result.formatted).join('|');

// Returning the formatted results
return formattedResults;

[Daniella]

Is there a way I can filter out seeing only the address and secondly, when I click on the address (auto-fill address), it doesn’t reflect on my text input?

[Eric_Penn]

Please refer to Roberts Video and just replace the Fetch JSON column from Roberts video with the JavaScript column from this thread. If I have some time later I will make a short video of my setup

[Robert_Petitto]

Thanks for the response, Eric!

[ThinhDinh]

Can you show me how you current set up the “fetchURL” column? I think there’s still a step afterwards to parse out the results, what you show on the screen there looks weird.

[Daniella]

I went ahead to use Radar integration for auto complete features. Thanks for the help