siege of castle

API data exchange, metaphorically illustrated.

In this tutorial, I'll show how to make a GET request in a JavaScript page, as simply as possible.

Here's what it looks like as a standalone html page.

https://javascriptpage.s3.amazonaws.com/javascript-get-request.html

Let's start with the API. To make a GET request, there must be an API.

The API stands for Application Programming Interace. It's an endpoint - a URL - you can visit to get a response. It answers your GET request with data.

We're going to use this API from CoinDesk, a cryptocurrency news site, for Bitcoin prices.

https://api.coindesk.com/v1/bpi/currentprice.json

The 'request-maker' is normally a piece of code, but it can also be your browser. You can go to the link by clicking on the link; it's just some text.

It's probably hard to read and doesn't look very good, for a webpage. It's ultra no-frills.

This is what many API's do: they dispense plain text, for you to style and display in your webpage.

The plain text version is ugly. But with styling, it looks good; it's presentable information people will like.

It's also real-time information, so unlike something that's hard coded, it won't go out of date.

Here's that same information from the website above, styled nicely using CSS in this page, shown below.

...waiting

The code to do this in the JavaScript framework this page is written in, Svelte, is shown below.

This defines the function, the part that works the same across frameworks.

I used the fetch method. It's a little bit simpler than an xlr request, the original way to do this.

You can read more about their differences here, but bottom line, you want code that works, and fetch works & can be used anywhere xlr would have been used.

const url='https://api.coindesk.com/v1/bpi/currentprice.json';
   const fetchText = (async () => {
   const response = await fetch(url);
   return await response.json();
})() 

So that gets the data. Now you have to show it.

The way to show it differs between frameworks and JavaScript. But basically both use something called 'await'.

Here's how it looks in JavaScript, the most common use case.


  <div class="box">
    <div class="featured">
      <p class="featured" id="banner">waiting...</p>
    </div>
    <div class="schmancy">
      <div class="fancy">	  
	<p>$<span id="usd">0</span>  <span id="usd-description" style="float: right;" ></span></p>
	<p>£<span id="gbp">0</span> <span id="gbp-description" style="float: right;" ></span></p>
	<p>€<span id="eur">0</span> <span id="eur-description" style="float: right;" ></span></p>
      </div>
    </div>
  </div>  
  <script>
    const url='https://api.coindesk.com/v1/bpi/currentprice.json';
    const fetchSet = (async () => {
	const response = await fetch(url);
	const data=await response.json();
	document.getElementById("banner").innerHTML=data.time.updateduk.split("at")[0];
	document.getElementById("usd").innerHTML=data.bpi.USD.rate;
	document.getElementById("gbp").innerHTML=data.bpi.GBP.rate;
	document.getElementById("eur").innerHTML=data.bpi.EUR.rate;	
	document.getElementById("usd-description").innerHTML=data.bpi.USD.description;
	document.getElementById("gbp-description").innerHTML=data.bpi.GBP.description;
	document.getElementById("eur-description").innerHTML=data.bpi.EUR.description;	
    });
    fetchSet();
    </script>

This is how it looks in Svelte.

{#await fetchText}
  <p>...waiting</p>
{:then data}
  <div class="featured">
    <p>{data.time.updateduk.split("at")[0]}</p>
  </div>
  <div class="schmancy">
    <div class="fancy">	  
      <p>$ { data.bpi.USD.rate <span style="float: right;" } > { data.bpi.USD.description } </span></p>
      <p>£ { data.bpi.GBP.rate <span style="float: right;" } > { data.bpi.GBP.description } </span></p>
      <p>€ { data.bpi.EUR.rate <span style="float: right;" } > { data.bpi.EUR.description } </span></p>
    </div>
  </div>
{:catch error}
<p>An error occurred!</p>
{/await}

Despite the differences, you can still see the strong similarities.

Here's what the code looks like, in HTML & JavaScript, in a one page .html file.

get-request.html

You can download the file, open it in a code editor, rename it to .html, make changes to it, and see how that changes the page when you re-open the same file in your browser (which will render like a normal webpage).

You can see the html page live here.

Here's the Svelte file, actually this page, as code.

javascript-get-request-example.svelte

There's some CSS in there too, to make the animations, but that's presented without comment, so as not to make this overly long; you could remove all of that and it wouldn't change the core API/get request content.

So that's how you do a GET request. It can get more complicated if you have to authorize, and of course if the data returned is more complicated, or if you have to hit multiple endpoints.

But generally speaking, that's the procedure, which you can adapt to your situation.