Front End Development topics with a touch of humor

Get Chuck Norris Facts On Your Site!

Get data from an API

September 23, 2020


You may be wondering who Chuck Norris is, and why you want facts about him on your website. If that's so, be very careful about how loud you wonder. I mean, we're talking about a guy who:


Jokes aside, Chuck Norris was an action hero/movie star in the 70s and 80s. Perhaps best known for giving Bruce Lee a decent fight in Enter the Dragon, Chuck had a fine beard, a hairy chest, and was a legitimate martial arts master in his own right. His specialty was a flashy round-house kick.

Who knows exactly how fame works, but sometime in the 80s his star dimmed, and he transitioned from movies to the small screen (that was before TV was cool, you see). Then, sometime in the 2000s, Chuck Norris Facts! started, and he became famous for being famous.

Chuck Norris Facts! play on Norris' uber-masculine image. I mean, a guy with a cool beard who knows karate and also is a Texas Ranger? Does it get cooler that that? Perhaps his metamorphosis was complete when proof emerged that Norris let it be known he thought the facts were flattering.

So Norris is not only a very bad man, he's a cool guy, too!

But about that API...

But you came here to learn about APIs, not 70s action heros, right? So what, exactly, is the big deal about the Chuck Norris API?

The main thing is that it's quick, reliable, and doesn't require authentication. That means that you can write up some quick code and not worry about having to send over passwords or an API key or follow any strict rules. We can get a taste of success and learn the basics before worrying about that stuff. So shall we?

Fetch again

We'll use Fetch API again, a neat JavaScript language feature that lets us make a request over the internet with minimum fuss. To remind, here is the basic format:

            .then(response => response.json())
            .then(data => chuck.innerHTML = data.value)

Briefly, there are three lines:

  1. Fetch takes a url that is the location of the API
  2. the first then method uses the json() method to convert the response into a JavaScript object
  3. The second then method is used to put the result on the page

There's one more important piece of code:

            const chuck = document.getElementById('chuck');

This refers to a blockquote element on the page with the id of "chuck". It is the thing that will receive the Chuck Norris fact. There are two of them on this page: Every time you come back, there will be two different quotes, requested by the code and sent by the API.

A few more details

If you go to the documentation, you will see that there are some other options. The way those options are controlled is by the text at the end of the url, after the "?". You can try those out in different ways, but an easy one is just putting them into the browser.

For example, if you type or paste:


into the browser, you will receive a list of categories back.

Say you do this, see the available categories, and decide you'd really like to explore Chuck Norris Facts! in the "dev" category. So then you change the url in the following format. Notice you leave out the brackets when you change it out.



When I tried it, I got back:

Chuck Norris doesn't use Oracle, he is the Oracle.

That's good for a half-smirk, I guess?

The API documentation also says it offers a "free" text search. Well, I'm glad we don't have to pay for it. I mean, I like Chuck Norris Facts! as much as the next guy, but money's tight in this economy... Let's try it out. I'm going to search for "Oracle," just as a test.



I get back several Facts! This one, I thought, was cute:

"Chuck Norris once visited the Oracle and told her: 'Don't worry about the round house kick'. She responded: 'What round house kick?'. BAMM... that round house kick."

Good luck, and happy APIing!