How to Fetch API Data from a URL – JavaScript Tutorial

You can access the full course here: Bite-Sized Modern JavaScript

 

Fetching Data from URL

To fetch data from a URL, we will use the Javascript fetch API. We won’t cover every aspect of the fetch API, just the basic retrieval functionality. To get this functionality, you need to install node-fetch. Set up node in your project if you haven’t already and navigate to the folder in terminal. Once there, run:

npm i node-fetch --save

To install node-fetch and add the line:

const fetch = require(‘node-fetch’);

At the top of your program. Next add the code:

fetch('http://api.steampowered.com/ISteamUserStats/GetGlobalAchievementPercentagesForApp/v0002/?gameid=221380')
    .then(function(response) {
        return response.json();
    })
    .then(function(myJson) {
        console.log(JSON.stringify(myJson));
    });

This will fetch the data, convert it to JSON, and print it to the console. The json response data is stored in the “myJson” variable. This is also taking advantage of Javascript’s new Promise feature along with asynchronous functionality. Let’s take a few minutes to talk about Promises and async functions in Javascript.

 

Transcript

What’s up everyone. Welcome to fetching data from a URL. Here we’re going to write the actual code that will fetch the data we want, and we’re going to use our asynchronous functions that promises to do so. Actually, before we get started we should probably install that fetch API.

So assuming that you are in your project directory, if not then navigate there now. We’re just going to use a simple npm command to install what’s called node fetch. So we’re going to do npm i node-fetch –save like so. Okay, so we’ll not worry about the warning or anything as long as we see added 1 package then we are good to go. If you open up your packages.json – so let’s go back here if we open up packages.json we should see node-fetch there.

So now we’ll need to add the fetch API here. And we’re gonna do so by creating a constant called fetch this is going to be equal to require node-fetch. Okay, so now we have the fetch function and can use this to retrieve the data in our URL. So lets actually go back to chrome. This is the data that we want. This is exactly what the format of the data we want comes back in.

So what we’re going to do for now is gonna copy this URL. We’re gonna create a variable and let’s make this URL equal to this string here, and we’re gonna feed that into a fetch function. So we’ll create an async function and we’re going to call this: fetchData. It’s going to take in a URL as a parameter. Now we want to call upon fetch with that URL. So fetch is the actual JavaScript function built into the node fetch library that will be used to actually retrieve data from a URL.

So we actually want to store the results of this in a variable. We’re going to call this a response. Response equal to fetch(URL). This is where things get interesting, because this is an asynchronous function, we’re going to actually do await fetch(URL). So the fetching of the data is going to take some time. We don’t want this blocking up the main thread while it’s fetching the data. And that’s why we’re doing await fetch, because fetching the URL or fetching dates from this URL may take some time. So we’re basically just going to say response only takes on the value after fetch has retrieved the data.

Okay so from here, we have the response but we want to make sure that it’s JSON data. So this will just come back as an object that needs to be decoded. So what we’re gonna do is we’re gonna create a variable, jsonResponse, and we’re gonna set this equal to again await – because it may take some time – and we’re going to get our response and we’re going to call the JSON function. So this is gonna convert our response to JSON and then let’s say we just want to print out a simple console.log and we’re going to stringify this data.

So we’re gonna call upon a JSON method called stringify and we’re just gonna pass in our jsonResponse. So we’re gonna call upon fetchData and we’re going to pass in that URL. Now this will do the printing. We can actually give this a save and we can run it. This is really promising, you can see that we’re getting back this huge string of data and has essentially exactly the same data as we see here.

Interested in continuing? Check out the full Bite-Sized Modern JavaScript course, which is part of our Bite-Sized Coding Academy.