Fetching Data

[00:00:00]
>> So it's time to work in our app, so, so far we have been just playing with the DOM. And the next step is to set up all the data management that we will have. And that means, for example, download the menu, the JSON that we have available, and store that menu somewhere.

[00:00:20]
And for that we will go to Chapter 2, we're going to start with Lesson 3, the Creating Initial Services, and what's a service? A service is nothing from a JavaScript point of view. So in this case it's just a concept, a design pattern that we are defining, it can have any name.

[00:00:43]
So we don't have anything known as a service in the DOM. But if you're coming, for example, from Angular, probably you've heard the term service, but on other libraries, you don't have. This is just, in this case, an object or a way to offer different services to the app, okay?

[00:01:04]
So in this case, what we're going to create is a services folder. Remember that I mentioned that maybe we don't wanna creating a scripts folder, maybe we wanna follow a different pattern. So I'm going to create a services folder, and inside that folder I'm going to start with two services.

[00:01:22]
An API that will be responsible for fetching the data from the network, and a store. And the store object will store data that in this case it's global to the app. This is just a concept, okay? You might have heard similar concepts in some libraries, this is just a concept that I'm applying here.

[00:01:46]
So the store will store the state of the app, and right now the state of the app will contain a menu. That's the list of categories and products inside each category, and the cart that we start as an empty array. So I'm going to create these files, so I'm going to VS Code.

[00:02:12]
And I'm going to create, A new folder, services. You may be thinking, well, maybe we wanna put all these JavaScripty-based files in another folder, such as source, yeah, you can do that, it's your code. And within here I'm going to create API.js, and also Store.js, capital S, actually, it's up to you.

[00:02:42]
But you will see that I'm using here capital S because I will create some kind of a singleton object. And sometimes when we are creating singleton objects, we follow the class syntax of starting with capital, but actually, it's up to you. So for the store, what we're going to do is we're going to create, for now, just a constant, it will be an object that will contain the menu.

[00:03:12]
We start with null, that's how we will know we are using JSON syntax, so you should use colon. We will use null when it means we don't have it yet, for some reason, typically it's because it's still loading or we haven't loaded yet. And then the cart as an empty array, that's all.

[00:03:37]
And we're going to use ES module, ECMAScript modules. So that means that we don't know that yet, so looking at the JavaScript file, we don't know if it's a module or not. But the module means that we don't want this file to just be global. So this variable will be local only to this file, that's the idea of a module.

[00:04:00]
But I can export that store, and I'm going to export that as the default object that I'm exporting, okay? For now, just that will work, for the API, I'm also going to create an object. By the way, should I create the class and then an instance of that class?

[00:04:24]
That's also possible, but because it's a singleton and this is JavaScript, I can just create an object. I don't need to create the class first to then create an instance of it. And in this case, I'm going to set the property with the URL of the file that I will load, in this case, it's data/menu.json.

[00:04:43]
And then we'll create just a simple method to actually fetch the menu, then later we can add more more APIs. So in this case, it's going to be a function, I will use arrow function here. And what I want is to fetch to make an HTTP request to the API.

[00:05:05]
In this case the API is pretty simple, it's just a get from a JSON file. So for that I'm going to use the fetch API. So I'm going to fetch from the URL, I can use API URL, or this URL in this case will work. The fetch API returns a promise, it's promise-based.

[00:05:27]
Because it's promise-based, I can use then and catch, or I can use async await. So I think that async await looks better in our code. So I'm going to upgrade my ideal function that I have here, the arrow function, to be an async function. So then I can await for the fetch and store their results like so.

[00:05:54]
The result in the fetch API, it's actually an HTTP response, it's not really the data yet. And one of the things that I can do is I can also await for a JSON parsing. So if I use result.json I'm actually saying I wanna parse the HTTP result as a JSON.

[00:06:22]
And that's what we're going to return to whoever is calling this API. And finally, I'm going to export default.API. You will see that I will try to keep things as simple as possible. And that's one of the key aspects of being successful with vanilla JS. So being simple to understand what you're doing in separate files and following your own guidelines to do that, right?

[00:06:54]
Because yeah, we can add more abstractions, we can add abstractions layers. But for that, first it's important to be confident on the platform itself first before adding more abstraction layers. So now, these are two services. So where are we going to use these services within app.js? The problem is that, well, in app.js I'm going to clean this up, so I'm going to clear out the DOM content loaded, and I will keep just one.

[00:07:25]
How can I import my two services? At this point I cannot import them, because to use ES modules, we all need to be within the umbrella of a module, and this script is not a module. How can we convert or upgrade that script into a module? It's actually pretty simple.

[00:07:52]
In the HTML we have to change the script title. And we are going to add the type property, and we will use module as its value. So defining type module express that this app will be loaded as a module. Because of that, every variable that we define in that JavaScript file will not be a global variable for the whole page, just for that file.

[00:08:20]
And that file can export and import things from other files as well.