I am trying to make an API call from a grist document I have on an HTML file using JavaScript. I was able to make the call using python but I am getting an error using JavaScript and was wondering if there is an issue with my syntax. I placed a photo of what I have and the API call I am attempting to make.
Hi @Tazwar_Belal.
What’s the specific error you’re getting?
At first glance, one problem I see is with your URL. The part after ?q= can’t have bare spaces and needs to be encoded first. Something like this should do the trick:
const url = new URL('https://grist-ej.bballou.com/api/docs/<YOUR_DOC_ID>/sql');
url.searchParams.set('q', "SELECT COUNT(Number) FROM RFI_Log WHERE Status = 'Open'");
fetch(url.href, {
...
}
By the way, is this HTML document something that will be shared with the public? Generally, embedding an API key within an HTML document is not recommended, as anyone who can access the document can look inside and see the API key.
George
This was going to be for internal use. What I was trying to do was create an HTML representation of a specific information but with added styling and with the API call I was going to pull the information and have it presented by using a custom widget which would take my domain url and present a styled version of the information I wanted to present to my collogues using Grist within out workspace.
The main error I get is that it fails to load the information I want to present and this is the image showing that:
Also I tried to implement the code snippet you placed up top like so:
I am getting this issue on my console:
Sorry, there was a typo in my original reply. I updated the code snippet. Could you try again?
George
Hmm I am getting this issue now:
I wonder why it is being blocked? Is it because I have it hosted via github on my own domain?
The last error has to do with access to the document. Is the user whose API key you’re using have view access to the document? The SQL endpoints have an additional wrinkle in that they require you to either be a document owner, or enable the checkbox to allow everyone to download a copy of the full document from Access Rules, before you can run any queries.
The error before that one happens when the page that you’re trying to access the Grist API from is not hosted on the same domain (e.g. grist-ei.bballou.com). It’s a security mechanism provided by your browser. (It’s called CORS - more info here.)
George
I see now, the page I am trying to access is a different domain compared to the grist one. Is there a way to make an API call with the difference in domains or is that a necessity? I was able to make calls using flask but I can’t have that represented on my domain since HTML is static.
I would have just tried to use the HTML viewer from the custom widget options but I can’t seem to have the styling appear how I want. It ends up being a normal text that is small.
One option would be to use a proxy server that’s configured to allow requests from any origin. There are hosted offerings of CORs proxies, but like with all proxy servers, you need to consider risks like sharing and trusting your Grist API key and request data with an outside entity.
The source code for the HTML viewer, and all our other Grist custom widgets, is freely available on GitHub. Another option would be to fork your own version of the HTML viewer and make any tweaks you’d like to the styling. You can then have your Grist instance use your fork of the HTML viewer instead of the default one.
George
Yeah I am trying to do that instead, I wanted to change up the onRecord.html on my forked version like so:
I basically changed the styling. Would I just use the URL and place it onto the custom URL here:
This didn’t allow me to connect to github.
I ended up using the python API call and used aws to host it where as previously I was using git pages which wasn’t showing my dynamic data I was pulling so now I’m able to display the website with the api call being pulled accordingly.