Your RemoteDataStore module can save individual coffee orders to the server. The next thing to do is add a getAll prototype method so that it can retrieve all orders from the server. Get it started in remotedatastore.js:
...
RemoteDataStore.prototype.add = function (key, val) {
...
};
RemoteDataStore.prototype.getAll = function () {
// Code will go here
};
App.RemoteDataStore = RemoteDataStore;
window.App = App;
...
Next you will add a call to jQuery’s $.get method. Like $.post, you will pass it the server URL. But you will not pass it any data, because you are retrieving information instead of saving information. You will need to pass it a function argument so that it knows what to do with the data when it comes back from the server.
Call $.get in RemoteDataStore.prototype.getAll.
...
RemoteDataStore.prototype.getAll = function () {
// Code will go here
$.get(this.serverUrl, function (serverResponse) {
console.log(serverResponse);
});
};
App.RemoteDataStore = RemoteDataStore;
window.App = App;
...
Save and return to the DevTools in the browser.
In the console, instantiate a RemoteDataStore with the same URL as before. (Pro tip: Instead of re-typing the very long line with the URL, you can use the up and down arrow keys to cycle through statements you have entered into the console.) Then call its getAll method:
var remoteDS = new App.RemoteDataStore
("http://coffeerun-v2-rest-api.herokuapp.com/api/coffeeorders");
remoteDS.getAll();
In the network panel of the DevTools, you will see that the
GET request went out. It should return within
a few dozen milliseconds. Some coffee order info (from data preloaded on the server) will appear in
the console (Figure 13.9).
You may see slightly different results, depending on what has been added to the server. However, getting any result shows that you are successfully retrieving data from the server.
You can retrieve the data from the server, but you cannot return it from getAll. This is because getAll only makes the initial Ajax request; it does not handle the response.
Instead, you pass a response handling callback to $.get. Your response handling callback will work like the event handling callbacks you have written – in both cases, the callback should expect to receive an argument. This means that the response data is only available inside the body of the callback. How will you access it outside of that callback?
If you pass getAll a function argument, you can call that function inside the $.get callback. There, you have access to both the function argument and the server response.
Add the function argument and call in remotedatastore.js:
...
RemoteDataStore.prototype.getAll = function (cb) {
$.get(this.serverUrl, function (serverResponse) {
console.log(serverResponse);
cb(serverResponse);
});
};
App.RemoteDataStore = RemoteDataStore;
window.App = App;
...
The getAll method retrieves all the coffee orders on the remote server and passes them to the callback cb function that is passed in.
You also need to implement the get method, which retrieves a single coffee order by the customer email address. Like getAll, it will accept a function argument, which it will call and pass the retrieved coffee order.
Add this implementation of get to remotedatastore.js:
...
RemoteDataStore.prototype.getAll = function (cb) {
...
};
RemoteDataStore.prototype.get = function (key, cb) {
$.get(this.serverUrl + '/' + key, function (serverResponse) {
console.log(serverResponse);
cb(serverResponse);
});
};
App.RemoteDataStore = RemoteDataStore;
window.App = App;
...
Save your changes to remotedatastore.js. Enter the following code in the console, passing an empty anonymous function to remoteDS.get. (It is expecting a function argument, but you only want to take it for a quick test.)
var remoteDS = new App.RemoteDataStore
("http://coffeerun-v2-rest-api.herokuapp.com/api/coffeeorders");
remoteDS.get('[email protected]', function () {});
Your console will look something like Figure 13.10.
