# Auto Complete Address

**URL:** <https://community.glideapps.com/t/auto-complete-address/75885>\
**Category:** Ask for Help\
**Created:** [August 26, 2024, 12:09pm UTC](https://community.glideapps.com/t/auto-complete-address/75885 "2024-08-26T12:09:18Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Daniella](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/daniella/32/77943_2.png) [@Daniella](https://community.glideapps.com/u/Daniella)\
**Post date:** [August 26, 2024, 12:09pm UTC](https://community.glideapps.com/t/auto-complete-address/75885/1 "2024-08-26T12:09:18Z")

</div>

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?  
 ![Capture](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/5/853311292e0ec9141f5775cea388080b053cb7e0.png)

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [August 26, 2024, 12:26pm UTC](https://community.glideapps.com/t/auto-complete-address/75885/2 "2024-08-26T12:26:24Z")

</div>

![Screenshot 2024-08-26 at 8.23.16 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/5/856adb1be8b32bb2d27c1560b5492889dda2c994.png)

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

```auto
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;

```

---

<div class="post-metadata">

**Author:** ![Daniella](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/daniella/32/77943_2.png) [@Daniella](https://community.glideapps.com/u/Daniella)\
**Post date:** [August 26, 2024, 1:48pm UTC](https://community.glideapps.com/t/auto-complete-address/75885/3 "2024-08-26T13:48:56Z")

</div>

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”.

1. **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

 ![fetch url](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/4/c4f605d5aa27a0bb641eff20f6df3797bde6101d.png)  
 ![template column](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/3/e34dd6da475b86894bc85c5784a901b27f55f5ea.png)

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [August 26, 2024, 2:00pm UTC](https://community.glideapps.com/t/auto-complete-address/75885/4 "2024-08-26T14:00:47Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Daniella](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/daniella/32/77943_2.png) [@Daniella](https://community.glideapps.com/u/Daniella)\
**Post date:** [August 26, 2024, 2:11pm UTC](https://community.glideapps.com/t/auto-complete-address/75885/5 "2024-08-26T14:11:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [August 26, 2024, 2:22pm UTC](https://community.glideapps.com/t/auto-complete-address/75885/6 "2024-08-26T14:22:58Z")

</div>

> [@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?

---

<div class="post-metadata">

**Author:** ![Daniella](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/daniella/32/77943_2.png) [@Daniella](https://community.glideapps.com/u/Daniella)\
**Post date:** [August 26, 2024, 2:34pm UTC](https://community.glideapps.com/t/auto-complete-address/75885/7 "2024-08-26T14:34:48Z")

</div>

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”

 ![Capture](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/8/48d470120c484e3c8d3417a0b9e91ae0ccd127a0.png)

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [August 26, 2024, 2:48pm UTC](https://community.glideapps.com/t/auto-complete-address/75885/8 "2024-08-26T14:48:44Z")

</div>

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

```auto
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;

```

![Screenshot 2024-08-26 at 11.41.07 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/2/82010982480abd7d3ddf7766a439060c291e569f.png)

---

<div class="post-metadata">

**Author:** ![Daniella](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/daniella/32/77943_2.png) [@Daniella](https://community.glideapps.com/u/Daniella)\
**Post date:** [August 26, 2024, 4:12pm UTC](https://community.glideapps.com/t/auto-complete-address/75885/9 "2024-08-26T16:12:24Z")

</div>

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?  
 ![output](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/c/1c7aaa00668f65fa361c56e7fd2d5796ce8f2e00.png)  
 ![Capture](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/e/eed798cca072c75cfe6d1d98c97051dfb9936c15.png)

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [August 26, 2024, 4:49pm UTC](https://community.glideapps.com/t/auto-complete-address/75885/10 "2024-08-26T16:49:41Z")

</div>

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 👍

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [August 26, 2024, 9:40pm UTC](https://community.glideapps.com/t/auto-complete-address/75885/11 "2024-08-26T21:40:03Z")

</div>

Thanks for the response, Eric!

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 27, 2024, 12:22am UTC](https://community.glideapps.com/t/auto-complete-address/75885/12 "2024-08-27T00:22:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Daniella](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/daniella/32/77943_2.png) [@Daniella](https://community.glideapps.com/u/Daniella)\
**Post date:** [September 4, 2024, 7:28am UTC](https://community.glideapps.com/t/auto-complete-address/75885/13 "2024-09-04T07:28:05Z")

</div>

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