Irakli Tchigladze
on 2022-08-20
Data on a website is constantly being updated. Displaying the nearest upcoming holiday, reporting live news, or even something simple like showing weather forecasts. Websites need to stay up to date.
Dynamic text is text that is constantly changing or being updated.
One way to implement it on your website is to manually update data each time it needs to be updated. It can take a while to find all the values that need to be updated, so this isn’t a very efficient approach.
A better approach is to have an API that shares the most recent information, which is automatically displayed on your website. The only downside is that setting up infrastructure for API can take time and technical resources that many small businesses don’t have.
Fortunately, Quickstart API allows you to create and maintain an API in just a few clicks.
Let’s imagine we have a website (live demo) where we display the nearest upcoming concert in Hamburg.
As time goes on, information will need to change, so this is a perfect example to showcase displaying dynamic text using Quickstart API.
1. Log into your APISpreadsheets account. You can create up to 3 separate instances of Quickstart API with a free account.
2. Click ‘API’ in the main menu
3. Open the ‘Upload’ section in the left sidebar menu and select ‘Quickstart’
4. Fill out key-value pairs to return data in JSON format. You can use the blue ‘+’ button to add as many key-value pairs as you need.
In case you don’t know, JSON stores data in a syntax similar to normal JavaScript objects, which contains keys (properties) and values.
5. Click ‘Create Your Quickstart API’ button
Clicking the button will take you to the File configuration page.
On this page, you can find and copy API URL.
You can copy the URL either manually or using the green button.
Visiting this URL will show the data in JSON format
File page contains code samples to easily access data in C, Python, JavaScript, Ruby, PHP.
In this case, we will access data for a web application, so we’ll use JavaScript.
This is the standard code snippet for receiving data in JavaScript:
We make a few small additions to this code.
1. We use the template literals JavaScript feature to combine static text and dynamic values from the API
2. We use the document.getElementById() method to add HTML elements to the container.
Here’s the full HTML code:
If you need to change the information, go over to the File settings of Quickstart API and click ‘Edit Values’ in the top-left corner of the page:
As time goes on, you can announce another nearest concert:
As soon as you save changes, the updated values will be automatically displayed on the website:
Simplicity of Quickstart API comes with its own set of drawbacks.
1. You can only work with one file. If you want to display data about more than one item, consider using a spreadsheet importer instead.
2. Values can be edited only from the APISpreadsheets account. If you want to work with data provided by many contributors, create a spreadsheet importer.
3. You need to maintain (update, delete, add) values in the Quickstart API yourself. This is not practical for too many properties.
