No more automatic $promise unwrapping

Like any Philadelphia sports fan says, "BOOOOO!!"

In AngularJS, I liked the cleanliness of the code:

$scope.objects = ObjectAdmin.query();

And as it automatically unwraps the promise, the data updates correctly on the view side, and everything works fine. But I started playing with Angular 1.3 and it no longer does this. Now you have to call:

ObjectAdmin.query().$promise.then(function(data){ $scope.objects = data; })

Which is just ugly. But I guess the team at Angular made the decision for a good reason, but I have to update all of my code. Booooo!!!

This became painfully obvious when attempting to group a multiple select options by a property that is bound as a foreign key, after the promise has resolved.

You can imagine this data structure:

object: {   name: "Test", objectClass: "a_foreign_key" }

objectClass: { key: "a_foreign_key", name: "Object Type" }

Probably easier to think about in a non abstract way (although, in my current project, "Object" is the actual name of the item I'm dealing with).

person: { id: 1, name: "Jason", professionId: 1 }

profession: { id: 1, name: "Software Developer" }

So, when I get the list of "persons", and the list of "profession", I would grab the reference to the profession referenced by the professionId in the person, then assign it to a new property on each person, $professionRef.

so person 1 would like like this:  { id: 1, name: "Jason", professionId: 1, $professionRef: { id: 1, name: "Software Developer" } }

THEN my select list would use the ng-options to this effect:

ng-options=" group by person.$ for person in persons track by" ng-model="office.bestSmellingDeveloper"

(The use of $professionRef and $resource no longer automatically removing $ properties on POST/PUT is another pain point for me :)

So at the time the $promise resolves, the select list is like F#@% YEAH DATA!!! And it binds itself, but $professionRef isn't updated yet. So it's not grouping by anything and you have a bland list of things. I use the chosen jquery plugin which just makes these look beautiful with bootstrap of course, and I get bummed when it looks fugly.

I realize this wouldn't have worked as is, even with $promise unwrapping, it all depends on when the SELECT chooses to bind its data, and it would typically be immediately after the promise resolves. Really where this affected the code the most was in the chosen plugin I wrote, which looks like this now that I'm not binding promises to it anymore.

    module.directive("ngChosen", function($parse, $timeout){
        return {
            restrict: "A",
            require: "ngModel",
            link: function(scope, element, attrs, ngModel){

                scope.$watch(attrs["ngChosen"], function(){    
                    $timeout(function(){ element.trigger("chosen:updated"); });

                scope.$watch(attrs["ngModel"], function(){
                    $timeout(function(){ element.trigger("chosen:updated"); })

But used to look like this:

    module.directive("ngChosen", function($parse, $timeout){
        return {
            restrict: "A",
            require: "ngModel",
            link: function(scope, element, attrs, ngModel){
                var chosen = scope.$eval(attrs["ngChosen"]);

                if (chosen.$promise) {
                    chosen.$promise.then(function(){ $timeout(function(){ element.trigger("chosen:updated"); }); })
                else {
                    scope.$watch(attrs["ngChosen"], function(){    
                        $timeout(function(){ element.trigger("chosen:updated"); });

                scope.$watch(attrs["ngModel"], function(){
                    $timeout(function(){ element.trigger("chosen:updated"); })

But now that Angular is no longer automatically unwrapping promises... well, I guess I could keep the promise unwrapping in the chosen plugin, just in case I have a simple case that I need to bind to it (hardly ever the case), but since I won't be binding $promise objects to select lists most of the time, I can just say I won't bind any even though it's easy. Because I'll be used to unwrapping them manually to handle cases like the aforementioned.


Doing is the best form of learning

REST.  It's one of those things that most of us developers typically deal with on the client side of things, or if we deal with them on the server side, we're using an already written API which "REST-ifies" our data. It was somewhat of a mystery to me, and a challenge, to know how to implement an abstract RESTful interface. I had written the webserver I use in node.js which supports all kinds of things, but hadn't yet added REST support. Until last night!

It wasn't too much of an undertaking, I guess I implemented the webserver in such a way that could be easily extended with REST. That's good, go "past Jason".

Basically the server gets the request, attempts to rewrite the URL given the site's configuration of URL Rewrites (which I wrote), then it gets the content (server side processing), and writes the content on the response stream, along with doing cookie and header processing, g-zipping, cache headers, etc. Nearly everything a mature web server should do.  It's been around since March 2011 and I always go back to making it better.

I started adding REST to it last night around 10pm, and by 12:30 I was writing code against it using AngularJS.  The REST format is inspired by AngularJS, in that you can provide parameters expected in the format :id   (colon - name).

I always start with how I want to write code.  This, I find, is a very important aspect of how I architect things.  I don't want to write a whole bunch of code that I'll have to write each time I want to use the new feature I am adding. So I START with the code that I'll be writing to use the new feature. If this hasn't yet sunk in as to how important I think this is, let me add this sentence... There. It's very important to me and how I architect.

I know the architecture of my web server, and know that you can't just reference things inside of it that haven't been given a public interface. It really has no public interface. The web applications implement the interface to work within the web server. I am looking at a way to decouple them but for now, this is how it is. The "params" array was added in that way because of this.

this.get = {
    path: "/:id",
    handler: function(db, id, qs, callback){
            engine.getObject(db, id, callback);
    method: "GET",
    params: [
        function(context){ return context.db; },


So in my site code, I'm registering a "get" method that takes the id of an object, looks in the database, and returns it. A URL for the call may look like this: /resource/objects/53f810db8a8cda084e000001

Here's some node.js code that comes from my "resource" module. Within the resource module, you register resources and later check the URL and http method against the current resources, to see if this is a resource / REST call.

this.registerResource = function(domain, name, resource){
    var r = /:([a-zA-Z0-9]+)/g;    
    var m = null;
    for (var i in resource){
        var res = resource[i];
        var regexString = globalPart + name + res.path;
        while ((m = r.exec(res.path))!=null){
            regexString = regexString.replace(":" + m[1], "(.*?)");
        var local = { domain: domain, name: name, method: res.method, regex: new RegExp(regexString), handler: res.handler, path: res.path, params: res.params };

For the resource, for which the above "get" code is just one method on a resource, find all the methods, replace the URL with a regex. Instead of the "path" which would be "objects/:id", it creates "/resource/objects/(.*?)", stores the original path, the method to handle it, the http request method (GET, POST, PUT, DELETE currently supported), and the params array.

When a request is made, find the resource with the following code, if no resource is found, or no resources on the current domain that match the HTTP Method, it's a standard request.

this.getResource = function(domain, url, method){
    var domainResources = resources.filter(function(r){ return r.domain == domain && r.method == method });
    if (domainResources.length == 0) return null;
    var resource = null;
        if (url == globalPart + + res.path) resource = res;  // prefer exact matches first
        else if (resource == null && res.regex.test(url)){
            resource = res;

    return resource;

The next methods call the resource handler. For GET / DELETE calls, the requestData is just the querystring, for PUT / POST calls, this will be the form data as parsed by the POST parser in node.

this.extractParamMap = function(url, resourcePath){
    var m = null, map = {};
    var urlParts = url.split("/");
    var resParts = resourcePath.split("/");
    for (var i = 0; i < resParts.length; i++){
        if (resParts[i].indexOf(":") == 0){
            map[resParts[i].substring(1)] = urlParts[i];
    return map;

this.handleResource = function(resource, url, context, requestData, callback){
    var params = [];
    var paramMap = this.extractParamMap(url, globalPart + + resource.path);

    for (var i = 0; i < resource.params.length; i++){
        if (typeof(resource.params[i]) == "function"){
        else if (typeof(resource.params[i]) == "string"){


    resource.handler.apply(resource, params);

The code within the webserver which was modified to process resources looks like this.  Determine if it's a resource or standard request. Call accordingly.

        if (req.method == "POST" || req.method == "PUT"){
            post.parseForm(req, function(formData){
                if (loadedResource != null){
                    resource.handleResource(loadedResource, url, site, formData, function(data){
                        var content = {};
                        content.contentType = "application/json";
                        content.content = JSON.stringify(data);
                else if (handler != null){
                    query.form = formData;
                    handler.handlePost(path, query, site, req, function(content){
                        if (jsonRequest) content.contentType = "application/json";
        else if (req.method == "GET" || req.method == "DELETE"){
            if (loadedResource != null){
                resource.handleResource(loadedResource, url, site, query.querystring, function(data){
                    var content = {};
                    content.contentType = "application/json";
                    content.content = JSON.stringify(data);
            else if (handler != null){
                handler.handle(path, query, site, null, req, function(content){
                    if (jsonRequest) content.contentType = "application/json";
        else {
            finishedCallback({contentType: "text/html", content: url + " - No handler found", statusCode: 404});

In AngularJS, with the $resource module, this is cake.

        return $resource("/resource/objects/:id", {}, 
                list: { method: "GET", isArray: true },
                get: { method: "GET" },
                save: { method: "POST" },
                update: { method: "PUT" },
                remove: { method: "DELETE" }


That's it!  Later on I might find I need other things, but that's all the code that was required for now for handling resource / REST style methods. I will have a site up in a few weeks / months that will use this heavily. Then you can see it in action!

You know you're a code snob when

Today I wrote a method that takes an updated object from the server and merges it with the current user's objects. These objects are in an hierarchy of client -> environment -> credentials.  So I wrote a function that sees that a credential has been updated (deleted, inserted, updated), finds the client and environment that it belongs to, if it doesn't have it, it "pushes" it, otherwise if it's not a delete, it updates it, and if it's a delete it removes it.  The other users can be editing clients or environments as well, so these have to work the same way.

The commit message for this change is as follows:

Update other users' data with data updated from the server.  Need to clean up the compare function, in client controllers line 65 to 118

Yep, 53 lines of non-trivial code and I'm all like "That is WAY too long..."   I will write a generic utility function that will do it for me. I found angular.copy to be very useful, I just need something to tell me what's changed.

I will need that function to keep track of users logging in and out as well, as it updates almost immediately for other users when someone logs out, and it uses way more code than I feel should be necessary as well.... If javascript had a universal "findIndex" method, it would be helpful, but I want to make it a 2-3 liner for these updates without writing my own "findIndex" function. More specialized...


I've started getting into Bootstrap and AngularJS. Look for posts on those topics soon. Bootstrap is fun because even I can make a decent looking app with pretty much no savvy for design, and Angular is fun because it forces you into a new way of thinking, and getting that stuff to work and "getting it" is really what I strive for. The moment something clicks... it's a drug to me.

Saving State in Javascript and AJAX

We're doing something cool in work, to do with resource scheduling in a nice ajax-y, jQuery-UI-ey way.  There are a set number of filters to apply to get the view of the resources you want, which can include Department (for example, Development, Front-End, Client Services, Marketing), the Employee themselves, Employee Roles to show Senior Developers etc, Client and Project. The problem was, these are all filtered via AJAX, and refreshing the page would cause you to lose your filters.

One way that developers solved this was by keeping the state in the "hash" portion of the URL.  The most prevalent method of this was called the "Hashbang" which would add the hash (octothorp) and an excalamation point (! - the "bang").  This is easy but could lead to messy / long URL.

Another method that is pretty convenient is to set a cookie containing the parameters. The downside of this is you can't send the same view that you're looking at to a coworker. That cookie is on your computer only.

I couldn't decide which one to implement so I decided to do both.

    var serializers = {};

    serializers.hash = function(){
        this.serialize = function(str){
            window.location.hash = str;
        };         this.prepDeserialize = function(){
            var hash = window.location.hash;
            return hash == null || hash.indexOf("#") != 0 ? "" : hash.substring(1);
    }     serializers.cookie = function(){
        this.serialize = function(str){
            window.Cookie.set("ajaxState_serialize", str);
        };         this.prepDeserialize = function(){
            return window.Cookie.get("ajaxState_serialize");

I have a cookie helper class which wraps what you can find on  If you want to use this code, you can provide your own cookie serializer, your own custom serializers, or whatever, without changing the rest of the code.

The rest of the code is just adding and subtracting values from the serialized data. To call it, it's simply this:

                var data = $.fn.projectFilter.getFilterData($wrap);
                window.AjaxState.serialize(data, true);

So you get the filter object and serialize it. The true on the call to serialize just says to "commit it", which means to write the data to the cookie or the hash on the same call. I've put this code up on this site, you can download it.

Javascript Functional Programming

In work, I was recently tasked with a data comparison project. A bunch of data was getting duplicated. These records include user first and last names, their phone, email, company.  The master file was a list of these same users but they were assigned "card id" because they were already customers.

The method was to find a match for name (first and last) and if the email didn't match, then separate it out. Then find a match for email, and if the name didn't match, separate it out.

You can imagine this logic:

Go through each line... 
var matches = core.filter(function(a){ return a.firstName == line.firstName && a.lastName == line.lastName; }); // match names 
if (matches.length == 1){ var matchingEmail = matches.filter(function(a){ return ==; });
    if (matchingEmail.length == 1){ add it to results }
     else separate it out;

And do the same, checking email first. The main feature of Object Oriented Programming is to abstract out data and functionality so that different objects can behave the same way in a system. The main idea of functional programming is that the process can be abstracted out.

What I'm basically doing is, match the line to the map based on some values, if there are any matches, find matches within that result which match some other value. If that result is 1, then we've found a good match, and repeat with the comparison methods swapped.

Or, even more abstractly... running a comparison function, getting results, and running another comparison function to filter the results further.

Let's define our comparison functions:

var compareName = function(a) { return a.firstName == line.firstName && a.lastName == line.lastName; };
var compareEmail = function(a) { return ==; };

We can create a method to run these comparisons. It will need the line, the master list, and the two comparison functions.

function compare(line, masterList, comparison1, comparison2)

And then we can call it like so:

compare(line, masterList, compareName, compareEmail);
compare(line, masterList, compareEmail, compareName);


I'm an IDIOT!!

I spent a ton of time trying to write a syntax parser for a meta-language which would be parsed by Javascript.  I just replaced a lot of confusing logic with about 40 lines of code.

First, Javascript is dynamic and has stuff built in that can evaluate arbitrary code passed in via a string.

I'm not talking about eval().


However, my syntax looks like this:  Hello {{page.user == null ? 'Anonymous' : page.user.firstName }}

So, we need to know what "page" is in the context of the function.  I still have to parse out top level variables.  In the code above, it will get "page" as a top level variable.

Then, I build up the function:

var f = new Function(vars[0], body);

"body" is actually modified, I set it to "return " + body;  So that I can do {{ page.user == null ? 'Anonymous' : page.user.firstName }} and it will return the display name instead of undefined, the default behavior of a void function.

I have to count up the number of variables used, and build the function accordingly.  Currently, this is a switch statement.

switch (vars.length){
     case 0: f = new Function(body); break;
     case 1: f = new Function(vars[0], body); break;
     case 2: f = new Function(vars[0], vars[1], body); break;

Luckily in my code, there aren't more than 3-4 "top level" variables, including globals like "Array" and "String".

Here's the variable parsing part:

var shared = require("./shared"); require("strings"); var constants = { "true": true, "false": true, "null": true }; var lookup = {}; this.getVariables = function(body){ if (body in lookup) return lookup[body]; var vars = []; var instr = false; var instrch = null; var buf = ""; var toplevel = false; var result = null; for (var i = 0; i < body.length; i++){ var ch = body.charAt(i); switch (ch){ case "'": case "\"": instr = ch != instrch; instrch = instrch == null ? ch : (instr ? instrch : null); break; } if ((!instr && shared.tokenSeparator.test(ch)) || i == body.length-1){ if (i == body.length-1) buf+= ch; if (!toplevel && (result = shared.variable.exec(buf)) != null && !(result[1] in constants)){ if (!vars.some(function(d){ return d == result[1]})){ vars.push(result[1]); toplevel = true; } } buf = ""; } else if (instr) buf = ""; else buf += ch; if (toplevel && (instr || (shared.tokenSeparator.test(ch) && ch != "." && ch != "]"))) toplevel = false; } lookup[body] = vars; return vars; }

And here's the evaluation part:

var syntax = require("./syntax"); var shared = require("./shared"); var lookup = {}; var Evaluator = function(globals){ this.globals = globals; } Evaluator.prototype.evaluate = function(body, context){ body = shared.replaceComps(body); var vars = syntax.getVariables(body); var args = []; body = "return " + body; for (var i = 0; i < vars.length; i++){ if (context && vars[i] in context) args.push(context[vars[i]]); else if (this.globals && vars[i] in this.globals) args.push(this.globals[vars[i]]); } if (body in lookup){ return lookup[body].apply(null, args); } var f = null; switch (vars.length){ case 0: f = new Function(body); break; case 1: f = new Function(vars[0], body); break; case 2: f = new Function(vars[0], vars[1], body); break; case 3: f = new Function(vars[0], vars[1], vars[2], body); break; case 4: f = new Function(vars[0], vars[1], vars[2], vars[3], body); break; } var result = null; if (f != null){ result = f.apply(null, args); lookup[body] = f; } return result; } this.Evaluator = Evaluator;

shared.js has a regular expression, a map (for old syntax considerations), and a function to replace some old ways of doing things with the new, pure Javascript way of doing it.

this.replCompRegex = / (eq|ne|gt|lt|gte|lte) /; this.replCompMap = { eq: "==", ne: "!=", gt: ">", lt: "<", gte: ">=", lte: "<=" }; this.replaceComps = function(body){ var res = null; while ((res = this.replCompRegex.exec(body)) != null){ body = body.replace(res[1], this.replCompMap[res[1]]); } return body; }

Javascript Peculiarity

I was trying to write a syntax parser, and everything was going just great until I came across this little tidbit. In parsing this syntax:

obj.prop1.prop2.substring(0,1) I'd parse and evaluate obj, then find properties in it like so: var currentContext = null; code.split("."); for each (token in split string){ if (currentContext == null) currentContext = evaluate(token); else if (token in currentContext) currentContext = currentContext[token]; }

Evaluate executes code and returns objects within a context global to the method call, not the local context, which I call here, "currentContext"

But then I got an error trying to do stringProperty.substring(0,1). Can't call "IN" on a string? So I'm like, ok, let me try something else

if (token in Object.getPrototypeOf(currentContext)

And guess what... That shit don't work! Cannot call getPrototypeOf on a non-object. But it's a string?!

So I just ended up doing, if (token in String.prototype), just to say F YOU JAVASCRIPT!!! Otherwise I love Javascript. If you have any insight on this, PLEASE feel free to leave a comment.

I wrote up a JSFiddle for it, please link your own in the comments

Solving [WordHero]

I took pretty much a brute force attack at coming up with this app that solves [WordHero]. It is pretty efficient and takes longer to type in the letters of the puzzle than for it to solve it.

Here's how I went about it.

So, you get a puzzle with 16 (or so, as you can see with the Qu block) letters arranged in a 4x4 grid.  Obviously this is a dictionary brute force attack, in the most literal sense.

What I do is start at the top left block, finding words that start there, then when all options are exhausted, move onto the next block and find all words that start there, and so on until we've covered all blocks. I wrote this solution in Node.js. First, there is the LetterBox class:

var LetterBox = function(letter, row, col){ this.letter = letter; this.row = row; this.col = col; this.used = false; } LetterBox.prototype.clone = function(){ var lb = new LetterBox(this.letter, this.row, this.col); return lb; }

The letter box can only be used once during a word solve. The next is the Board, which consists of LetterBoxes

var Board = function(str){ this.originalString = str; this.makeBoard(str); this.letterBoxLookup = {}; var self = this; this.letterBoxes.forEach(function(lb){ self.letterBoxLookup[lb.row + "" + lb.col] = lb; }); this.rows = 4; this.cols = 4; }

I implemented clone on both the Board and LetterBox classes.
The last piece is the BoardSolver class. We'll just look at two functions of it:

BoardSolver.prototype.solve = function(max){ for (var i = 0; i < this.board.rows; i++){ for (var j = 0; j < this.board.cols; j++){ var boardinstance = this.board.clone(); this.getWords("", i, j, boardinstance, this.dictionary); } } var list = []; for (var w in this.foundWords) list.push(w); return list; }

And getWords:

BoardSolver.prototype.getWords = function(cur, row, col, boardinstance, dictlocal){ var letter = boardinstance.getLetter(row,col); if (letter == null || letter.used) return; var curlocal = cur + letter.letter; var potlocal = this.potential(curlocal, dictlocal); if (potlocal.length == 0) return; // no potentials down this path var wordlocal = curlocal.length > 2 ? this.matches(curlocal, potlocal) : []; var self = this; wordlocal.forEach(function(w){ if (!(w in self.foundWords)) self.foundWords[w] = w; }); letter.used = true; //var recurseClone = boardinstance.clone(); // n,s,e,w this.getWords(curlocal, row, col-1, boardinstance.clone(), potlocal); this.getWords(curlocal, row, col+1, boardinstance.clone(), potlocal); this.getWords(curlocal, row+1, col, boardinstance.clone(), potlocal); this.getWords(curlocal, row-1, col, boardinstance.clone(), potlocal); // diagonals this.getWords(curlocal, row-1, col-1, boardinstance.clone(), potlocal); this.getWords(curlocal, row+1, col+1, boardinstance.clone(), potlocal); this.getWords(curlocal, row+1, col-1, boardinstance.clone(), potlocal); this.getWords(curlocal, row-1, col+1, boardinstance.clone(), potlocal); }

So, while we're recursing, we'll get the current potential word (previous cur + this letter) and see if there are any potential words, words that start with the letters in curlocal. If there are no potential matches, stop recursion. If there are potential matches, keep going, also, store the current matched words at the current length (e.g. "break" is found on the way to finding "breaking")

To speed things up a bit, I only then search the potential list in the future attempts to narrow it down. Notice I'm passing the potlocal (potential local dictionary) into getWords on recursion.

To use the app currently, I just modify the string of characters. They are entered as follows (for example, for solving the puzzle attached in the screenshot)


It will then store a file called 


Here's the results of it running that:


My dictionary is lacking words, it only has 81,536...

One thing to point out. Since Javascript does everything by reference, I have to clone the board for each level of recursion since they will mark letters as used and then future recursions will see them as used.  The clone board method clones the letter boxes and then correctly marks the currently used letters as used in the clone. This makes it correct.

The file uses a library I wrote for node.js to easily read / write files. You can download my [WordHero] solver here. You can fill in the missing fshelp methods with standard node file IO methods.


JsViews and JsRender Use Case...

I came across JsRender a few weeks ago, looking for an updated javascript template rendering system. I was in need for a side-project at work (yes, we have side projects sometimes, although honestly, I did most of it at home).  The basic gist of this side project is this: we have many clients, with many servers that we have to maintain, and each of those has different passwords. This would replace an Excel spreadsheet that sits on a shared drive, that when a password changes, we have to go in and update it, and it might be locked because someone else is viewing it.

The technological philosophy behind the creation of this application is this:  Users can log in, add clients, environments, credentials at will. The updates are seen almost immediately to other users logged in, through ajax polling. And an extensive history is kept so we can keep track of who updated what, and what it was before. Passwords are encrypted and viewable upon request.

Some definitions... environments are like, production, staging, dev. Credentials can be username / password for remote desktop access, database, the CMS admin, FTP, etc.

Also listed for each client is their subversion URL if they have one, the version of the development environment to use, which database and version, and what CMS and version they are using, if any.\

Here is a picture of it:

So here, the client is Delphic Sage (for our website, etc), none of these pieces of data are real.  There are four environments.

Data structure is as follows:

Client: Active, Name, Host (Rackspace, Self hosted, etc), Software list, comments, Environment list, History list
Software: version, DB reference to software (type (cms, devenv, database), name, versions list)
Environment: type (free text, usually production, staging, dev), url, credentials list
Credential: username, password, server or url (could be localhost, server name, url to admin login etc), comment

The whole thing is really cool. Maybe I'll put up a sample of it somewhere, but our app will be run internally of course.  I'll post another screenshot when the styles have been updated! The data structure I created in MongoDB is pretty much literally what you see on screen, and it taught me a lot about MongoDB. I also wrote a lot of helper methods to shorten the code a lot when dealing with MongoDB. The back end is my Node.js web server (what is running this website).  I can't think of anything else to add at the moment, so that means it might go into production very soon.

I'll make follow up posts with some code.