loading...

JavaScript GET Requests: A How-To

julianeon profile image Julian Martinez Updated on ・5 min read

get request crypto

Want to make a GET request from JavaScript in a webpage, to display some data or information from an API? In the screenshot above, all that information, live, is being pulled into a webpage.

You can see the code from the screenshot in action here at javascriptpage. It can take up to few seconds to load, because it's fetching the data from an API (also, it's on a free tier, without authentication).

I didn't hand-code any of that price information , remember -  it's all coming from an API.

By writing GET requests in JavaScript into your code, you can also make that happen.

Let's start with the API. To make a GET request, you have to request it from an API.

API stands for Application Programming Interface.
API Image

An API is an endpoint - a URL - you visit to get something in return.

In this case, we're making a GET request, which the API answers with text.

Here's we're using an API called DomainsDB.info, to fetch information in response to a request.

As an example, look at the GET request below, which retrieves all webpages that have medium in their name.

https://api.domainsdb.info/v1/domains/search?domain=medium&zone=com

You can see the API returns just by visiting it in your browser. Click the link; you'll see text, as in this screenshot (pretty printed using an extension in my browser).

API text

It doesn't look very good and is hard to read, since it's just text, without styling - that is, without nice-looking HTML and CSS to make it polished.

This is a common API use case. The API's dispense plain text. It's up to you to do the UI work for presentation on your site.

This is also real-time information, so unlike something that's hard coded, it won't go out of date. In other words, this information will change, as the API gets new information - and since this is price information, it's going to be changing all the time.

Here's what it looks like, after I style it and insert it in a nice format into my page (showing you the zoomed out view, so you can see how much information is returned).

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

get rows webpage

The JavaScript code to do this is shown below.

const url='https://api.domainsdb.info/v1/domains/search?domain=medium&zone=com'
 const proxy = 'https://cors-anywhere.herokuapp.com/'
 fetch(proxy + url)
 .then(blob => blob.json())
 .then(data => {
 let items=[];
 data.domains.map(element => items.push(element.domain));
 const lines=data.domains.map((element) => "<p>"+ element.domain + "</p>");
...

You might wonder why there's a proxy in there. 

In this case, it's because the API call wouldn't work without it. Removing it would result in a CORS error, which is an entirely different ball of wax (see the link for an in-depth explanation).

But basically, browsers block front-end code from accessing resources on other servers by default. You use a proxy to get around that error.

The 'map' code above takes the response from the API, and uses it to create an expression that's ready to be used - a string made up of many HTML tags that can be dropped in anywhere in an html page.

You'll also notice I used the fetch method. You can use either fetch or xhr (XMLHttpRequest) but I find fetch a little easier to write and reason about.

This code gets the data. Now that you have the data, you have to show it.

Here's the code that attaches it to my specially styled div for this.

document.querySelector(".box").innerHTML = lines.join('');
 })

Here's the div where that goes, with the class "box" (how the querySelector identifies it), after I've fetched it.

<div class="box">
</div>

Here's what the code looks like in a one page .html file.

https://gist.github.com/julianeon/05b054b258b6875e4d6f4c3e0920e289

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.

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

Here's a slightly different version, that instead of searching for 'medium' every time, allows you to search for specific text through an input box. Click the button to run the search.

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

There's some CSS in there too to make all the colors, and while that's in the code for you to examine, I won't go into it here because it's not essential to the lesson. You could remove all of it and it wouldn't change the core API/get request.content.

In fact, just for comparison's sake, here's a much simpler version, that just shows black on white text.

get rows black and white page
Same content, different styling.

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

So that's how you do a GET request. It's that simple! (Well, maybe not that simple.)

API requests can get much more complicated than this - a common use case would involve an API you have to authenticate against, for example - but this should get the idea across.

In other words, while the specifics may change, this is the general procedure; you can use GET requests and JavaScript to present information in all kinds of ways.

Try finding an API of your choice (see this list) to experiment on your own. In no time you'll be able to fill the webpage of your choice with API content, too.

My name is Julian Martinez and I'm a consultant and developer. You can visit https://javascriptpage.com to see similar tutorials, or discuss a project. Or you can follow me on Twitter.

Posted on by:

julianeon profile

Julian Martinez

@julianeon

I'm interested in development as it relates to JavaScript, React, AWS, Go, and cryptocurrencies. Also I'm friendly.

Discussion

markdown guide