Angular http.get basics - Kevin Chisholm Video
https://blog.kevinchisholm.com
In this video I’ll explain the basics of how to use the Angular HTTP.get method.
Making an http.get request in angular is pretty simple to set up. Before we jump into the code, let's take a look at this example page. So after the page loads, we see some data in the page, and this data is fetched asynchronously, and then injected into the page. Let's inspect it and take a look at the network tag.
Now I'm going to refresh the page, and look down here and I see this request, and here's the response we’re getting back. So notice how the data from the response matches the data in our page. The first item is London, price 1200, Paris price 2250, Miami price 1100, and so forth. So obviously this data in the page matches the data that we're getting back here.
So just to illustrate that the data in the page is being fetched asynchronously, and then being injected into the page. So let's see how this all works. So here are my components. In the Init method, the ngOnInit method, I set a timeout, and I'm just doing that so that you can see when the page loads that something's happening asynchronously.
Otherwise it happens in about a half a second and it all flies by too quick, so I just wait a second and then I call the load packages method. It's just a function that I wrote. But the load packages method is really where things happen. So here, we're referencing the http service, and we're calling the get method on that service. So this url right here is just a free JSON service that I'm using that creates dummy data.
In fact, if I go to a browser, and I paste that url, this is the data that I get back, and you can see it matches the data in our page. This is the data that we got back earlier. London price 1200, Paris price 2250, and Miami price 1100, and so forth. So this is the data that actually shows up here. It's just if I paste this url, I get the actual raw data.
But I say all that just to point out that this right here makes an asynchronous http.get request and it's just some dummy data that I've set up. And next, I'm going to convert the result of that get request. There's some JSON, and then I'm going to subscribe to that JSON.
I don't want to get into this too much, but this is a feature of rxjs, which allows you to subscribe to a data stream. But the point here is just to understand the syntax: that we make the get request, we use the map method to convert it to jason and we subscribe to that jason. And when we subscribe to that jason, this is a callback that we're passing to the subscribe method. And in that callback we're getting some data and I'm saying this.destinations equals data. So I'm saying that the destinations property on this component, which is an array, is equal to the data that I get back.
So let's look in our template and see how that winds up in the view. So here I've got an unordered list, and for the unordered list I've got one li but for the li i'm using an ngfor and I'm saying let destination of destinations, this destinations property right here corresponds to this destinations property here in our component.
So we're saying in the template, for every element in the destinations array, call it destination and then populate this template, and we have the name destination name, destination duration, and the destination price. And these, this template right here, corresponds to what you see here: the duration ten days, the price 1200, so that's how that gets here.
So the main thing to keep in mind is the syntax for making an http request. We first reference this.http and that's because we're importing the http servers and we're setting http to be a property of 1r component, and we're referencing the http service and its get method.
We're making the get request and then we're mapping the result of that request to some JSON, and then we're subscribing to that JSON data so that when it comes through -- this is a technique for handling asynchronous activities in javascript -- so we're saying when this data comes through, we want to get it and assign it to this.destinations.
And this.destinations is an array, and that array is set up in a template and we're looping through it and saying for every destination destinations, populate the template with that destination. And we wind up getting a page that makes an asynchronous request and loads the data that it gets from that request into the page.
If you found this video helpful, you can subscribe to my channel by clicking the red "Subscribe" button right under the video. You can also take a look at my blog, where there are many articles and tutorials about web development.
Thanks very much for watching.