This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "HTTP Demonstration Part 2" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Scott Moss: So yeah, this is one way how you would get. And then as you can imagine, a post. We obviously can't post to this Reddit URL, so I'm not gonna try to do that. But it will look very similar to this. It would be something like this, followed by the JSON.stringified body of the data that you're posting to.
[00:00:23] Now if you wanna work with the headers, we would just have to inject headers and request options from HTTP and then we would just configure our headers here. So it'll be something const headers equals new headers and then we can put our header stuff here, authorization, whatever it is.
[00:00:57] And then you need to set up a new options. Request options, and then the headers are going to be these headers. Like that. And you can just pass that in as a third argument.
>> Scott Moss: Any questions on this stuff? Yes?
>> Speaker 2: Can I just see the constructor that was in app.
[00:01:30] Yeah great [INAUDIBLE].
>> Scott Moss: Any questions on this? So, we figured out how to fetch it. Now lets go over strategy of how to successfully grab this data from the service, implement it in one of our components, and on to a template. We will just render these Reddit posts on to a template right quick.
[00:01:54] That way you can get a taste of how you would do it with the widgets. So, obviously I don't need this stuff anymore. Let's get rid of that. Not that.
>> Scott Moss: And that's gonna be a get. So we got that. Make sure we return this. If we don't return this then you don't get access to it.
[00:02:19] So make sure you do that. And then we're obviously not gonna count the log here. We're actually not gonna subscribe here. We're gonna subscribe in the component itself, not in here. The reason we don't want to subscribe in here is because there's nothing that we wanna do in this service.
[00:02:33] Everything that we wanna do when we get notified about the data is in the components. That's where we subscribe to. We don't wanna subscribe in here. So now we're gonna go over to our component. I'm just gonna put it in app for the sake of not having to make more stuff.
[00:02:50] And I'll just make a component right quick and we'll just call it post. And it's just gonna be a ul with an li that has an ng four on it.
>> Scott Moss: Posts of posts. And then we'll just put. The posts.title.
>> Scott Moss: And, the author, so we'll do that.
[00:03:30]
>> Speaker 3: Stop your posts, you have posts of the posts.
>> Scott Moss: Thank you. Post of posts we'll put that there. And now in our app we just need to work with that. So let's just go ahead and set that up. Post as an array, got that. What we'll do, as soon as this starts we'll fetch it, then we'll subscribe, and now we get the posts.
[00:03:58] Actually this is going to be some weird funky data, Reddit returns some weird data, let's see what this looks like. Let's see what this looks like.
>> Scott Moss: Cool, so it's an object. There it is it. It's the children property that we want. So we only want the children property so I'm gonna go back here and just modify our map function.
[00:04:30] Just return that. So that way by the time it gets to the view, we'll really have what we need. And in fact, I can even go a step further. So the children property, I'll have an object with the data project on them individually. And then the ones that we want are author and title, I am guessing there is a title.
[00:04:52] Yeah title. So we can just do that here too. So we can say res dot JSON dot data dot children dot map the child,
>> Scott Moss: And all we want to return. And really, all we want from the child is,
>> Scott Moss: The data attribute. So if you don't know what that is, I'm destructuring in the array, I mean, in argument signature so you can just destructure there.
[00:05:21] So there's a property called data on the argument that's coming in on this callback. So I'm destructuring right there. It's the equivalent of doing that's equivalent of that. We're doing it in the array signature. It's also the equivalent of doing it like, that. All three of them are the same.
[00:05:49] So we'll just keep it simple, we'll just do that. And I want to return is the author, which is the data dot author, and then the title which would be the data dot title, there we go. So let's see what that looks like. Cool, there we go, alter title, that's all we needed.
[00:06:19] And now we can come back over here. And we then say, posts equal that data or this dot post. The both add data. And our template should be good, plus that title plus the author. We should see something on the page now, there we go.
>> Scott Moss: So that's one strategy, probably the most naive, simplest strategy to get data from a server and into your component.
[00:06:53] I would not recommend doing it this way, like I said, it's very naive, it's not gonna scale. We probably wanna use something better and we'll talk about better strategies here on the course tomorrow. But this is the simplest way to do it. But obviously storing this state like this, is not a good idea.