AngularJS Architecture: Using $http to load JSON data

InstructorLukas Ruebbelke

Share this video with your friends

Send Tweet

Now let's learn how use the $http service to make requests to remote servers. In our case, we will load the data from JSON files and then make them available in our controllers. We will see a few techniques that I frequently use to make working with $http data a lot more convenient.

Rogier
Rogier
~ 6 years ago

What would the bookmarks-model look like if the bookmarks where a nested resource on the api server? Like when you'd get to a bookmark using a URL like: '/api/categories/design/bookmarks'

The URLS.FETCH property would then depend on the currently viewed category. Would it be something like this?:

model.getBookmarks = function(categoryName) {
    return $http.get('/api/categories/' + categoryName + '/bookmarks').then(cacheBookmarks);
};
Lukas Ruebbelke
Lukas Ruebbelke(instructor)
~ 6 years ago

Rogier, that is correct and why I love REST so much because you simply have to construct the proper endpoint. I would extract the logic behind generating the URL into a separate method but you are headed in the right direction.

Jonathan
Jonathan
~ 6 years ago

Out of curiosity, why did you capitalize the URLS object?

Lukas Ruebbelke
Lukas Ruebbelke(instructor)
~ 6 years ago

Good question. That is just a convention I use to imply it is a constant as endpoints generally do not change over the lifecycle of an application.

Jonathan
Jonathan
~ 6 years ago

I see. Many thanks. One more quick question. Why use $http.get(URLS.FETCH).then(...), instead of $http.get(URLS.FETCH).success(...)

Doesn't using .success save a few steps, as it returns the data directly and not the promise object? So no need for the extract and cache functions? Super confused here, ha.

Lukas Ruebbelke
Lukas Ruebbelke(instructor)
~ 6 years ago

Because we are dealing with an asynchronous operation, we definitely want to return a promise. This allows use to ensure uniformity in how we handle the response even though we are not sure when it will complete.

By returning a promise, we can also control what and how we respond to the controller that is requesting the operation i.e. caching, etc.

Jonathan
Jonathan
~ 6 years ago

Hey Lucas, thanks for entertaining my ignorance! Need to read up and get smarter on (i) how promises work and (ii) caching. Still quite confused.

Re caching, can you recommend any reading on how caching works / when to use it / how to use it in JS? I get the broad idea ('load something once instead of multiple times') but the implementation is a black box to me.

Re promises, strange that the angular documentation only covers using $http with .success and .error.

Matt
Matt
~ 5 years ago

So I'm trying to get my JSON data to load to the template and I did everything in this video. However, when I console.log(result) inside of the getCategories() function in categories.js, the result ends up being my entire index.html template??? Very bizarre and I'm not sure why it is reading the HTML rather than my json file. Help please!

Lukas Ruebbelke
Lukas Ruebbelke(instructor)
~ 5 years ago

Hi Matt -- are you using an HTTP server to serve up the web application? What endpoint are you hitting in your categories service? Can you trace it out in the network tab in the Chrome developer console?

Matt
Matt
~ 5 years ago

I'm tracing through my steps, console.logging everything...so this is what I've found.

On the extract(result) function, when I console.log(result), I can see that inside of the data property is my entire index.html for some reason, when it should be the array of objects from my JSON file. As excepted, logging result.data returns the index.html file.

I'm building my project out with the MEAN stack, so I am using an Express.js server. My endpoint is similar to what you have in the video:

URLS = {FETCH: '/data/categories.json'}

I added the '/' in the beginning to try and route it through the main directory. When I trace it through the network tab, I see that the Request URL is as follow:

Request URL:http://127.0.0.1:8080/data/categories.json

Lukas Ruebbelke
Lukas Ruebbelke(instructor)
~ 5 years ago

So just to clarify... you are hitting this URI http://127.0.0.1:8080/data/categories.json and getting the contents of index.html? If so, I am pretty certain that there is a problem with your Express middleware.

Matt
Matt
~ 5 years ago

Yea that's seems to be what is happening. Do you have any ideas as to what to look for?

Lukas Ruebbelke
Lukas Ruebbelke(instructor)
~ 5 years ago

You need to set up an Express route that is specific for http://127.0.0.1:8080/data/categories.json and return the categories.json file. You could even skip the JSON and just return the collection from within your Express app.

Nisarg
Nisarg
~ 4 years ago

why we are adding this extra method

        function cacheBookmarks(result) {
            bookmarks = extract(result);
            return bookmarks;
        }

isn't doing this is enough ?

        model.getBookmarks = function() {
            return $http.get(URLS.FETCH).then(extract);
        };

any reason to pipe that data to cacheBookmarks ?

Lukas Ruebbelke
Lukas Ruebbelke(instructor)
~ 4 years ago

Hi Jayendra -- I added that in to show how to implement caching as well as making your service stateful. There are cases where you may not want to store your results in the service and fetch a fresh copy every time but for performance reasons, it would make sense to not have to fetch a fresh copy every time. Especially if the data is fairly static.