JavaScript Web Client

Introduction

For those of you that know JavaScript, and want a more custom integration, but with a web client that makes it easier to work with JavaScript without the need to make calls directly out to the API endpoints, we have provided this for you.

There are three ways to integrate the results from UseSQL into your web pages make a call directly out to our API as done in our "Integrate With Your Static Site" tutorial, use the UseSQL templating library as seen here, or use this JavaScript web client.

To start using the JavaScript web client keep following along below otherwise, the other two options have some documentation linked above.

Getting Started

1. Include UseSQL JavaScript SDK

Before you can the UseSQL JavaScript SDK you need to include the snippet below before the </body> tag.

<script src="https://script.usesql.com"></script>

2. Use Client To Request Query Results

The next step is to provide the query we want to retrieve using our web client. Here you can provide the query directly or the URL for a saved query. If you are providing the query directly you will need to provide your key as well. An example of this can be shown below.

...
UseSQL.query(`SELECT * FROM "https://docs.google.com/spreadsheets/d/14nfqS4gh7KudU7-kRU5thHP_54G_ghe7PgYj5W_CyPM/edit#gid=0"`,
                {key: "PROVIDE_YOUR_KEY_HERE"}, {});
...

3. Update Your Callback

Now that we know how to make a call to the UseSQL API using the web client all that needs to happen is to provide a callback to start working with the data. In the example below we just print out the results, but at this point, you can do anything you want with the data.

<html>
<body>
<script>
    function successFunc(data) {
      console.log(data);
    }
    UseSQL.query(`SELECT * FROM "https://docs.google.com/spreadsheets/d/14nfqS4gh7KudU7-kRU5thHP_54G_ghe7PgYj5W_CyPM/edit#gid=0"`,
                {key: "PROVIDE_YOUR_KEY_HERE"}, successFunc);
</script>
</body>
</html>

At this point, you should be able to see your data in your browser console when loaded into the browser of your choice. For any additional questions please contact support@usesql.com or take a look at our FAQ that will continue to grow as we get more incoming questions about this library.

Parameters

After providing the query there are a number of parameters that can be or are required to be provided.

Key

Required

Description

key

No*

This is where you define the key that authorizes the query to UseSQL.

format

No

*This needs to be included unless you are providing the URL for a saved query.

FAQ

How would I provide a saved query to the JavaScript web client?

You would just provide the URL directly instead of a query. Below is an example of this:

UseSQL.query(`https://usesql.com/query/9g1jI3/usecases`, {}, successFunc);
PreviousHTML TemplatingNextIntegrate With Your Static Site

Last updated