1. JSON
Before jumping in the Async JavaScript world, make sure you understand what JSON is, we use it A LOT to consume and transmit data.
Example
{
"students": [
{
"id":"102",
"name": "Douglas",
"lastname": "Crockford"
},
{
"id":"103",
"name": "Nick",
"lastname": "Johnson"
}
]
}
[This video] will cover what JSON is, why JSON is important, what JSON is used for, the syntax of JSON, and multiple examples of JSON. JSON is the most popular data representation format, and is one of the most important, and easiest concepts you can learn in programming. It allows you to create APIs, config files, and structured data. We will be covering all of the terminology, and going through live examples of all the different JSON types.
Learn JSON in 10 Minutes
It is commonly used for transmitting data in web applications (e.g., sending some data from the server to the client, so it can be displayed on a web page, or vice versa). You'll come across it quite often, so in this article we give you all you need to work with JSON using JavaScript, including parsing JSON so you can access data within it, and creating JSON.
No, really, what is JSON?
2. Asynchronous JavaScript
Asynchronous JavaScript is everywhere on the web.
We are going to take a look at all the popular ways async code is run such as callbacks, promises and the new async await.
Async Javascript Tutorial For Beginners (Callbacks, Promises, Async Await)
https://www.youtube.com/watch?v=_8gHHBlbziw
In this crash course we will look at asynchronous JavaScript and cover callbacks, promises including promise.all as well as the async / await syntax.
Async JS Crash Course - Callbacks, Promises, Async Await
https://www.youtube.com/watch?v=PoRJizFvM7s
3. Fetching data
Accessing data from an API is one of the most common things you will do in web development, and the way to access APIs is with fetch. Fetch is function built into JavaScript that allows you to query any URL/API to get back data. The most important part is that fetch is asynchronous so it will run in the background and let you know when it finishes using promises. In this video I will show you exactly how to use fetch, and all of the common mistakes people make using fetch so you can get up and running in just six minutes.
Learn Fetch API In 6 Minutes
How do you retrieve, collect, and store data? The course will be taught through a series of creating three data projects.
fetch() - Working With Data & APIs in JavaScript
https://www.youtube.com/watch?v=tc8DU14qX6I
The retired XMLHttpRequest
It's important to know that before the Fetch API was released, another interface was widely used instead to fetch data: the XMLHttpRequest (XHR).
You will probably come across it when working on existing codebases or technical documentation that have not yet migrated to the new Fetch API.
The good news is that it works very similarly to the Fetch API, so you won't have to put forth any extra effort to learn/understand it.
In the brilliant video below (over 21K likes, wow!), the author reviews some fundamental concepts and uses XHR to fetch data:
In this JavaScript tutorial we learn what JSON and AJAX are and how to use them to load new data into our webpage on-the-fly.
JSON and AJAX Tutorial: With Real Examples
https://www.youtube.com/watch?v=rJesac0_Ftw
How about recreating this project in two different versions? One with XMLHttpRequest and another one with fetch to reinforce your learning?