This course has been updated! We now recommend you take the Ember Octane Fundamentals course.

Check out a free preview of the full Ember 2.x course:
The "Exercise 4" Lesson is part of the full, Ember 2.x course featured in this preview video. Here's what you'd learn in this lesson:

In this exercise, you will replace the hard-coded data in the application with dynamic data coming from the Github API.

Get Unlimited Access Now

Transcript from the "Exercise 4" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Mike North: We're going to take what we've built, which is hard-coded data in routes, pretty generalized handlebars templates that are using h to iterate over lists. And now we're going to switch to getting a real data from the GitHub public API. So I want you guys to leave the orgs page, which is your hard-coded list of orgs.

[00:00:30] Leave that as is and we're going to make it so everything downstream of that is actually getting data from an API. Remember how to use modelFor because in order to build some of these URLs, you will not have complete information in the model hook to do what you need to be able to do, to build the URL.

[00:00:56] Pay attention to what you want to give Ember. Pay attention to id and take a look at GitHub's returning and make adjustments as appropriate so that things work the way you want to them to work.
>> Mike North: So this is a literal example here. You can see that they're gonna return a numeric id.

[00:01:26] And my suggestion here, although you guys can take whatever approach you like, is I've just moved id to oldId and copied the name parameter, which is the name of this repository into id. So I haven't actually lost information here. I've just made a little swap so that I can use this and link to the way I would like.

[00:01:53] And this is very common to have to do something like this in Ember. Anytime you have a highly opinionated convention-oriented framework, there will be some work in dealing with things that don't align with it. And, oftentimes, you don't have the perfect API to talk to with Ember. So, this is something that is a common thing to have to deal with.

[00:02:19] So here's an example. This is like the error function version of what I just described which is create this oldId property equal to the id and the collaborate id with the name. And, effectively, that will take you from the top thing, which is what GitHub tells you, to the bottom thing, which is what Ember wants.

[00:02:39] And remember that promises chain? And so the fact that I'm returning raw from inside the callback to then, that means that, ultimately, if I were to return this form my model hook, I would be returning the JSON on the bottom example with oldId and with the id as the text, name of the repo.

[00:03:04] And, finally, I've done your research for you guys, and here is a cheat sheet for endpoints that you may find useful. GitHub, for these endpoints, requires no authentication, you don't have to worry about that. You can just use your browser if you want and kind of poke around and see how it works.