Fetching data

The Web is ubiquitous and an extraordinary source of data. In this lesson, we’ll explore how to fetch and download data.

Want to know when new lessons are available? Subscribe to the newsletter ✉️ and give a ⭐ to the GitHub repository to keep me motivated! Click here to get in touch.

Setup

Let’s set things up for this lesson.

Make a new folder somewhere on your computer, open it with VS Code, and create two files:

main.ts, where we will write our code. To start, you can add console.log("Hello!"); to it.
deno.json, which lets VS Code know this is a Deno project and enables the Deno extension. You can tweak settings in this file, but we’ll keep it empty for now.

Open the terminal and run the following command: deno run --watch --check main.ts

This command clears the terminal and reruns main.ts every time you save it (CMD + S on Mac or CTRL + S on PC).

You can use this setup to test the code provided in this lesson.

A screenshot showing VS Code running and watching a TypeScript file.

Fetching a JSON file

Let’s fetch this temp.json file. It contains the daily temperatures in Montreal from 2000 to 2020. I uploaded it to GitHub specifically for this lesson.

If you open it, you’ll notice it’s an array of objects, with each object storing a date string and a temperature.

A screenshot showing VS Code running and watching a TypeScript file.

To fetch it, you can use the fetch() function. It’s globally available, so you can call it directly in your code. It requires the relevant URL as a string.

main.ts

const response = await fetch(
  "https://raw.githubusercontent.com/nshiab/data-fetch-lesson/refs/heads/main/temp.json",
);
 
console.log(response);

💡

fetch() is an asynchronous function, so we need await in front of it to ensure our computer fetches the resources before executing the next lines. For more information, check the About await section in the Writing and reading files lesson.

We have a security warning! Deno warns us that some code is trying to connect to the internet. ⚠️

By default, Deno blocks any script from connecting to the web, which is a great feature. Imagine running code sent by someone that steals your information!

A screenshot showing Deno warning about a network connection.

To allow your code to connect to the internet, you need to pass the --allow-net flag in the terminal command.

So instead of running your script with deno run --watch --check main.ts as instructed at the beginning of this lesson, you must use deno run --watch --check --allow-net main.ts.

However, since we’ll also write data to our computer later, let’s use the -A flag instead, which allows our script to do anything it needs.

Click on your terminal and press CTRL + C to stop the script from running (this works on both Mac and PC). Then run: deno run --watch --check -A main.ts

Now it works!

A screenshot showing a fetch response logged in the terminal.

Wow… There is a lot of stuff in this response, and that’s normal. Your computer and the server hosting the file exchange a lot of information to ensure the connection works properly.

In our case, we know it’s a JSON file, so we can call the .json() asynchronous method to parse the response data as JSON.

main.ts

const response = await fetch(
  "https://raw.githubusercontent.com/nshiab/data-fetch-lesson/refs/heads/main/temp.json",
);
 
const data = await response.json();
 
console.log(data);

A screenshot showing a fetched JSON file logged in the terminal.

Here we go! We’ve fetched the data, and now we can work with it!

Instead of fetching it every time, we could write the data to a file for future use.

main.ts

const response = await fetch(
  "https://raw.githubusercontent.com/nshiab/data-fetch-lesson/refs/heads/main/temp.json",
);
 
const data = await response.json();
 
await Deno.writeTextFile("./temp.json", JSON.stringify(data));

A screenshot showing a fetched JSON file written in a file.

Congrats! You now know how to fetch and save JSON files. That was easy, wasn’t it? 😄

Fetching a text/CSV file

Instead of JSON, you might want to fetch and save a CSV file, which is plain text.

It’s pretty straightforward: instead of calling .json() to parse the response, use .text().

I uploaded temp.csv on GitHub for this lesson.

Here’s the updated code to fetch and write it. We’ll explore how to crunch CSV file data in another lesson.

main.ts

const response = await fetch(
  "https://raw.githubusercontent.com/nshiab/data-fetch-lesson/refs/heads/main/temp.csv",
);
 
const data = await response.text();
 
await Deno.writeTextFile("./temp.csv", data);

💡

To write the JSON data, we had to use JSON.stringify() because writeTextFile can only write strings, and the JSON data was an array of objects. However, the CSV data is already text, so we can pass it directly to writeTextFile.

A screenshot showing a fetched CSV file written in a file.

Fetching a webpage HTML

You can also fetch the source code of a webpage. For example, here’s how to retrieve the HTML from the Code Like a Journalist homepage.

We’ll explore how to extract data from webpages (a technique known as web scraping) in another lesson.

main.ts

const response = await fetch(
  "https://www.code-like-a-journalist.com/en",
);
 
const html = await response.text();
 
console.log(html);

A screenshot showing a fetched webpage HTML being logged in the terminal.

Conclusion

You now know how to fetch and save data with Deno.

But there’s something else that is extremely useful and published on the Web: TypeScript libraries. Go check out the next lesson to discover what they are! 👀

Enjoyed this? Want to know when new lessons are available? Subscribe to the newsletter ✉️ and give a ⭐ to the GitHub repository to keep me motivated! Get in touch if you have any questions.

Writing and reading files Using libraries