DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Julian Martinez
Julian Martinez

Posted on • Updated on

JavaScript GET Requests: A How-To

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.

Top comments (1)

Collapse
 
probros profile image
PRO-BROS

Awesome explanation. Definitely helps me in improving my knowledge of JavaScript and its libraries. It will also helps me in improving my Site.

Classic DEV Post from 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!