Zyring Day 10 – Callback Tuesday

[Note: These are more in-depth (read: tedious) write-ups of my experience with each section of the Zyring project, leading on from my intro post on Zyring. This is mostly for my own benefit but could conceivably be of use to someone doing the project.]

Divide apartments in a city into pages, part 1

This tutorial has a nice innocuous title but actually stumped me for ages. I spent all day on this but learnt some very useful stuff about JavaScript in the process (see later).

The idea of the tutorial is exactly what it says – divide up the list of apartments so that instead of vomiting a hundred or so apartments onto one page, it splits them into more user-friendly batches of 9. This also allows faster loading speeds and a less cluttered map. Seems reasonable.

The tutorial goes into very thorough detail on the process of how to split an array of data into sub-arrays. I think I could have worked this out OK on my own but I’m not complaining. The problem I had was how to adapt this method for getting my array from the backend server instead of one I’ve got saved in my current file. First I needed to understand a bit more about $resource and its query method, as I’d copied it in kind of mindlessly. I read some of the information on the previously linked (and very useful) tutorial on creating a CRUD app, and got my head around the syntax a bit better.

However, I was still confused: I tried printing my query({cityName: $routeParams.cityName}) to console.log and it was coming up empty. However, I’d used this in the previous tutorial and it definitely had some data stored in it. This looks like some kind of asynchronous thingy (to use the technical term).

😦 Time for some research.

Callback Tuesdays

At this point I should admit that I’ve been treating JavaScript as some version of Python, except it has the wrong syntax and runs in the browser. This approach was starting to fall apart a little…

I looked at Zyring’s own documentation on the $resource service and read the sentence

“If you like to be notified exactly when the results become available, you can pass in a function callback to the get and query methods”

I realised I didn’t really know what a callback is, and that I probably should if I was going to do anything time-dependent. Luckily when I googled it there were several decent introductions. I ended up playing with some examples based on this nice tutorial and runnable example. Below are my notes on this for future reference.

Their example is something like:

function mySandwich(param1, param2, callback) {
    console.log('Started eating my sandwich.nIt has ' + param1 + ' and ' + param2 + ' in it.');

mySandwich('ham', 'cheese', function() {
    console.log('Finished eating my sandwich.');

This produces:

“Started eating my sandwich.
It has ham and cheese in it.”
“Finished eating my sandwich.”

We have freedom to change the function:

mySandwich('tuna', 'banana', function() {

This gives

“Started eating my sandwich.
It has tuna and banana in it.”

Or here’s an example with a callback function with a parameter:

<br />function anotherSandwich(param1, param2, callback) {
    console.log('Time for another sandwich.nnIt has ' + param1 + ' and ' + param2 + ' in it.');

anotherSandwich('ham', 'mustard', function(param) {
  console.log('Shame I hate ' + param + '.');

which gives

“Time for another sandwich.
It has ham and mustard in it.”
“Shame I hate mustard.”

Divide apartments in a city into pages, part 1

So this gave me some basic idea about callbacks, including the idea that I might want to implement my pagination algorithm in a function callback to $resource.query, so that the array has been fetched from the server before I start doing anything with it. I don’t know if this is the ‘proper’ way to do it, but it worked anyway.

Finally, writing the pagination algorithm based on the example went pretty smoothly, and I had my big array of apartment data split into a bunch of smaller arrays. I wasn’t whether I was supposed to do anything else with it right now, like connect it up to the html file somehow, but I thought I’d keep going and see what the later tutorials said… I can always go back if necessary.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s