Workflows vs Web App?

Queries and Resources
1

I have a working workflow that uses snowflake + javascript and the google maps API.

When I use the same code in the web app module, I get an error. Any ideas?

This works:

image
image1478×674 118 KB

This does not:

image
image615×839 72 KB

Code:

const axios = require('axios');

// Array of addresses
const addresses = query1.data.map(address => address.ADDRESS);

async function getLatLong(addresses) {
const results = ;
for (const address of addresses) {
const url = https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(address)}&key=ZYX;
try {
const response = await axios.get(url);
if (response.data.status === 'OK') {
const { lat, lng } = response.data.results[0].geometry.location;
results.push({ address, lat, lng });
} else {
results.push({ address, lat: null, lng: null, error: response.data.status });
}
} catch (error) {
console.error('Failed to fetch lat/long', error);
results.push({ address, lat: null, lng: null, error: 'Request failed' });
}
}
return results; // This will return the array of results
}

return getLatLong(addresses)

2

Hi @Ryan_Nicholas

You cannot use require in the webapp.

You have to include axios as external js library and then use just the global name axios to do your fetch.

Hope this help.

3

hmm could you please provide an example? thanks!

4

Hi @Ryan_Nicholas,

You can add a custom library to your app like this:

image

Click the gear, select libraries, put in the URL for the package you want - you can check the links to various version of Axios here, the most recent one is https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.8/axios.min.js

Then in your query you can use the library as you usually would.

image

3 Likes