This course has been updated! We now recommend you take the Angular 9 Fundamentals course.

Check out a free preview of the full Build Web Apps with Angular 2 course:
The "Challenge 10 Solution Part 1" Lesson is part of the full, Build Web Apps with Angular 2 course featured in this preview video. Here's what you'd learn in this lesson:

Scott walks through the solution to challenge 10. He starts by adding the ability you read the widgets.json file and load a list of widgets.

Get Unlimited Access Now

Transcript from the "Challenge 10 Solution Part 1" Lesson

>> [MUSIC]

>> Scott Moss: First thing we had to do was create a method inside a service that uses HTTP to get the widgets. So, let's do that. Let's go to the widgets-service. We'll keep this mock data here for now. But the first couple things we need to do is import, I'm gonna start doing this.

[00:00:20] That's what I'm gonna start doing. So we're gonna import from HTTP. It's going to be the HTTP module, and that's really all we need, oops. And then now we just need to inject it, which means we need to make a constructor function, so let's do that. I'm just going to make it private, because it's not being used anywhere else.

[00:00:46] So we have that. Then I'm just going to make a method to fetch the widget stat not there yet. So let's just do that. So going to call this one fetch. Widgets,
>> Scott Moss: And what it's gonna do is it's going to return an observable that we can subscribe to.

[00:01:08] So actually let's get that URL in here too, so let's just make it private.
>> Scott Moss: URL this key, local host, 3000 widgets. Let's do that, and we'll go to agentspeed.get, to that url, and then we want to map Which means we need to bring in our operator from our operator R-X-ES, which is rx/, I forget the path every time.

[00:01:49] What was it?
>> Speaker 2: Add.
>> Scott Moss: Yeah, add, that's what it was. Map. Thank you. Thank you.
>> Speaker 2: I think it's add operator.
>> Scott Moss: Add operator.
>> Speaker 3: rxjs/add/operator/map.
>> Scott Moss: Thank you. So we got that, get the URL, and let's map, let's get the response, going with the response.json. In this case just as JSON because that's going to be an array.

[00:02:21] We could actually catch the error here too, but we'll skip that for now, so we'll just return that. So that's step one. Any questions on this? All right, injected the http, made a get request to the specified resource URL. And I'm going to map the response to just get the JSON back from the server, and that's it.

>> Scott Moss: Okay, so step two was to return that method from the service and and subscribe to it in the component so you could display the data inside the component's template. So what that means is that we need to get rid of this static widgets, so we'll just get rid of that, and we'll say widgets is just an array.

[00:03:11] And then now if we go to where we were actually using the widget service, which was
>> Scott Moss: Where were we using the widget service. Widgets TS. Yeah, okay so this is where we're using the widget service. But we will just sort it right here and we'll keep that.

[00:03:32] That will work for now but right here is where we were binding to the static widgets from the widget service, we are not gonna do that. So now what we're gonna do is, let's just make another method, and we'll probably call it the same thing, fetchwidgets, we'll do that.

[00:03:48] So now what we're gonna do is we're gonna come down here to, actually I'm going to make that private so we can access it. And we'll make another- actually make that method now. Fetch widgets and right now all it's going to do is this.widgetService, fetchWidgets. And that'll call it, and we can verify that so let's just look at what's happening when everything loads up.

[00:04:29] We can go under the network tab. Is it getting it? It looks like it's not getting it. Let's see what we did here. Fetch widgets, widget-service, this._http.get(this.url), res.json().
>> Scott Moss: Let's go back here, _widgetsService, this.fetchWidgets, fetchWidgets. So first, we'll just, I actually expect this to be called right now, but it's not.

[00:05:18] Let's see what's going on. It's definitely getting in there. It doesn't seem to be. Being called, hm.
>> Speaker 3: [INAUDIBLE]
>> Scott Moss: Yeah got to subscribe to it. [LAUGH] Look at that. I fell for my own thing. So we need to come back in here and subscribe right here, boom.

[00:06:18] So now that we subscribed we get the data or in this case the widgets. Now we'll just say this,
>> Scott Moss: dot widgets equals widgets. And that's it. Which will be NT ready because there aren't any widgets in my, database.
>> Scott Moss: So we got that. So just to. Get the thing going, we can just add some right quick.

[00:06:51] A widget has an ID, a name, and a description. Right it has a name and a price.
>> Speaker 2: [INAUDIBLE] already in your other file.
>> Scott Moss: I thought I got rid of it.
>> Speaker 2: You it up.
>> Scott Moss: Did I? Okay let's check it out. No I got rid of it, yeah I know, it sucks.

[00:07:09] We'll just have a price, right, is that with the model you guys had? Okay, a description, a name. I'll just put all that stuff on there and a price.
>> Scott Moss: All right, so at least we should have one.
>> Speaker 2: [INAUDIBLE] [LAUGH]
>> Speaker 3: You probably have to restart the JSON server.

>> Scott Moss: Yeah, I restarted it. I just did it so quick you I didn't see it.
>> Speaker 3: It's all right.
>> Scott Moss: [LAUGH] So there it is. So there is our one widget.