Javascript column to call API

Hi,
I’ve tried the JavaScript column method, to run API call but is not giving any results, I’m not sure that I understand haw it is working, here is my code (API_KEY is meant to be hided):

fetch(‘https://api.openai.com/v1/images/generations’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
‘Authorization’: ‘Bearer API_KEY’
},
body: JSON.stringify({
prompt: “p1”,
model: “image-alpha-001”,
size: “256x256”
})
})
.then(response => response.json())
.then(data => {
// Extract the image URL from the JSON object
let imageUrl = data.data[0].url;

// Use the image URL to display the image in app
document.getElementById(“myImage”).src = imageUrl;
});

Webhooks seems to be only for trigerring and not to for post method that I need

Hola @Kaiser2

You were close to get a good result but you need to change some things.

Take a look at this syntax and let me know what you get

Saludos!

One thing to be aware of with this approach is that while you can probably get it to work with a JavaScript column, it won’t be secure. This is because the API call is executed client side, which means that any user of your App could potentially discover your API key - if they know how.

I believe that later this year Glide will give us some more options for doing this sort of thing more securely. In fact I wouldn’t be surprised if we get a direct integration option with OpenAI.

In the meantime, I think if I was to try something like this I’d probably delegate the API call to a 3rd party. Something like Make. So a flow like:

  • Webhook from Glide to Make
  • API call from Make to OpenAI
  • Parse the response in Make and post the data back to Glide via the Glide API

There might be a slight delay using this approach, but I wouldn’t imagine it would be any more than a few seconds.

1 Like

I agree!

I think we discussed this issue time ago and a good workaround could be to use a variable/parameter to hold the API key and have a better protection.

The problem is… I don’t remember where that topic is in forum :woozy_face: :rofl:

2 Likes

I have a similar requirement but have no clue on js. Both the following give no return.
Both URLs and Headers work fine through Make.com. @gvalero

fetch('https://dir.aviapages.com/api/countries/?ordering=name', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'xxxx'
  }
})
  .then(response => response.json())
  .then(data => {
    // Handle the response data here
    console.log(data);
  })
  .catch(error => {
    // Handle any errors here
    console.error(error);
  });

var data= await fetch('https://dir.aviapages.com/api/countries/?ordering=name', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'xxxx'
    },
});

const json = await data.text();    //  or  data.json();   
return json

Any help ?

Hola!

BTW, don’t you have a CORS issue?

If so, see this thread to help you Google maps distance matrix - #12 by gvalero

Here’s the solution: 🆕 Call API: call custom APIs, and return data back to your app

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.