Fetching Data from the Server using RxJS

[00:00 - 00:36] The purpose of this lesson is to provide a recap on how data is being fetched from the server using ROGS, observables, its exhibits, the fact that we need to deal with a lot of boilerplates code before we can have access to the data and display it on the page. In the lesson, immediately after this, we are going to make use of signals to display the data on the page by making use of the entire probability API. As you can see on the page, we have a bunch of static data being showed on the page and if I street to visual studio code, you can see the code being reflected in the browser.

[00:37 - 01:32] We currently don't have any form of functionality, just a bunch of HTML and CSS that helps us to design the page. Currently, we just have the product's components, the navbar components, as well as the footer components. We also have our routes, which is ready created for us. We have the product routes, which is the only current routes available. Another thing we need to take note of is we currently have our server currently running on port 8000. So we cannot begin with the integration. First thing I want to do is to generate a new service file. To do that, I'm going to stop the server and run the command ng generate service and then I 'm going to generate the service inside the services folder and the service is going to be called products. We currently have node version 16 in our terminal. We need to make use of node version 18.

[01:33 - 02:38] So I'm going to make use of mvm use 18 to switch to version 18 of node server. So we can now regenerate the service for the as you can see, we now have the product service generated for us. Let's head back to Visual Studio could and then configure our provide HTTP clients. The provided HTTP clients allows us to have access to the HTTP clients module, which allows us to communicate with our REST API. So this is done inside of the app.config.ts file . So within the providers array, we have right here, we need to import the provided HTTP clients by importing provide HTTP clients from at angular slash common slash HTTP. And before we proceed, our life was to generate our environmental variables for the so back in the terminal, I can run the command ng generate environments with this folder, we will be able to configure a REST API URL. So back in Visual Studio code, I'm going to open environment.

[02:39 - 03:14] development.cs file. And within this object, I'm going to create two keys. The first key is going to be production, which is going to be set as false. And then we need to configure the API URL. So I'm going to say API on us for URL. And then it's going to be HTTP in lowercase, colon, false, large local hosts, colon, it's 1000, or slash API, which is the part of our REST API. I'm going to save that, close that file, as well as the app config file. Then we can add sheets to our services file.

[03:15 - 03:48] In the services file, before we get started, I would like to import our environmental API URL as a variable. So to do that, right above, I'm going to say REST API is equals two, I'm going to make it so bad tick as well as the dollar sign, I'm going to open a bracket and say environment, which is imported from the environment.development is going to be environment. api URL for slash products, which is the end point to get the list of all our product next up in the constructor.

[03:49 - 04:07] I'm going to create a private class by saying private HTTP HTTP client. Before we create the function that helps us to get all the list of products, our like was to create an interface. So within the app directory, I'm going to create a new folder called interface.

[04:08 - 07:30] And within the interface folder, we're going to create a file code API dash response dot CS inside here, we can type in exports interface. And then the name of our interface, which I'm going to call products. And this product is the shape in which we expect the data we're trying to get from the back end. First data is going to be the ID, which is going to be a type of number. And then we expect the title, which is going to be a type of string, then we expect a description, which is also going to be a type of string, as well as the price type of number. Then we expect to get the discount percentage, which is also going to be a type of number, then we are espada rating, the stock, stock is supposed to be a type of number, the brand, a tibri thumbnail counter, which is going to be a type of number. And then finally, the quantity, this is the data we expect to get from our rest API. I'm going to close the API dash response, those TS file and edge straight to the product service file. So within this file, I'm going to create a comment that says get product. And then let's create a gets product function, which is going to be an observable. And then we're going to pass in the products interface, which is going to be an MCR by default, then within the bracket webinar return, these dot HTTP dot gets because the gets request, and then we expect it to come in from the product interface. And then we cannot pass in our rest API URL by making use of back six by saying this dot rest API, as you can see, we have an error here that says cannot find name observable. That means we need to import observable from rxjs. So I'm going to type right under the product interface imports import observable from rxjs. And that right there should get rid of the arrow. So we've been able to create the method for our product service quickly, I'm going to edge straight to our product components, so that we can consume the rest API, which we just created. The first thing I'm going to do is to create a variable code products right above, and it's going to be a type of product, and it's going to be an MCR by default, we need to import it inside of our product s file, then within the constructor, we need to bring in the product service file by typing in private or product service product service. Next up, we need to make use of the engine in it, life cycle work by typing in ng on init. And then we need to import it by calling implement on init. And then within the at angular slash core, we need to import it right there. So without our access to the engine in its life cycle, which allows us to render the data when the page loads to finally, let's create a get product methods, we are post-consting the rest API. So to do this, we're going to say this the product service that gets product, which is the method we created in our service file. And we're going to subscribe to this because it's unobserv able. And because it's unobservable, it's going to return three observers, which are next, error, and complete. So the first observer is next, this is the observer dial source to get the data if the data is successful. So I'm just going to say products, make use of a fat arrow. And then within the brackets, I can say this dot product is supposed to product next, we can create this upon observer, which is the error.

[07:31 - 07:47] So this time around, it's going to be within an alert window method. And I'm going to pass in the arrow. And finally, the complete, this means all our requests is complete. I can just log in into the console, it's a first. So to be sure, our data is coming properly from the rest API.

[07:48 - 08:31] So I'm just going to look to the console is dot products. And then within the engine, in its life cycle, I'm going to call the method by saying these dots get products. So we can save everything we've done so far, extra to the browser. And we need to start our server. So by running in the south, as can see, our servers finished compiling and in the server, I'm going to refresh to be sure everything is working fine. So I'm going to inspect edge to the console, as can see, we have access to our data, we have five results coming from the rest API, which we can see right here. So what we need to do for the final step of this lesson is to get the data we have read, displaying in the browser, instead of the static data we have right here.

[08:32 - 08:55] So in the product component, or HTML file, what I'm going to do is to make use of the ng4, doctor, our directive. So I'm going to get rid of all the static data, except one. So we just have one data showing on the browser. So we can now look through this particular data by calling ng4 is equals to let's product of products. So let's product of products.

[08:56 - 09:41] And the first thing I want to replace is the image. So I'm going to get rid of the static image we have right here. And then we're going to make use of interpolation by same products dot stone, nail, then our Latin is the type two of the products. I can just say products dot tied to and then finally the price, I can get rid of this static price by clearing it off and saying products dot price. And then we can save and check the results in the browser. As can see, we have all the data showing in the browser. And with that, we've completed the integration of the observable as a means of fetching data from the back end . In the next lesson, we'll make use of signal to configure the fetching of data for this page. I'll see you in the