Category Archives: Javascript

Waiting for your web services? Hello JSON Mocking!

When we start a development sprint, as a UI / UX team, we will make sure that as a priority, that we identify all of the web services that we will need to consume. We then, define the parameters needed to call the service and generally, we will create a JSON object that we will expect the service to return us.

This helps us shorten the critical path by making sure that the service developers can prioritize their work efficiently, and also move development of web service stubs to the front of their work queue.  This process doesn’t always work perfectly and we are sometimes (often) in a position where the web service developers are days away from even making us a stub, so rather than postponing our own critical path work until later in our sprint, we can pretend we have a working web service using JSON mocking! Hooray!

The Tool : Mockjax

The library I use to fake a working web service is MockJax.  It is wonderfully simple.

  1. The library seamlessly wraps jQuery’s $.ajax command.
  2. You write your ajax call as you would if your service already existed
  3. In your page setup init function, you just once, setup an override based on the URL (and optionally POST type, etc), which can redirect to a function, or a static JSON text file, or another url
  4. When you call your $.ajax, the wrapper checks it’s override dictionary for a match, and if it finds one, it intercepts the call and serves your alternate mock data.
Delete Icon

How to remove a property from a javascript object

Add this to the “I-can’t-believe-I-didn’t-know-this” bucket.

If you have a javascript object that looks like this:

var myObj = { propA : "aaaa", propB : "bbbbb" };

and you need to remove all reference to propA (not just make it null), you could use the following javascript:

delete myObj.propA

which will erase propA entirely from myObj, which would then look like:

{ propB : "bbbbb" }

 

Pass multiple arguments to console.log from another javascript function

One thing we learned from our last project is that console.log can generate a LOT of noise. This noise is OK from a development environment, but once we move into production, it doesn’t make sense to still be writing to the log… that is until something goes horribly wrong in production and we need it enabled again!

For the record, nothing went horribly wrong in production.

So I devised a small helper class that will show or hide console.log messages depending on how you initialize it. The tricky part is that console.log can take multiple parameters, so I had to use console.log.apply(console, arguments); to relay those parameters untouched.

// logging utility library
function Log(_logConsole) {
	var self = this;
	this.logConsole = true;
	this.log = function() {
		if (self.logConsole) {
			console.log.apply(console, arguments);
		}
	};
	this.init = function () {
		if (_logConsole !== undefined) {
			self.logConsole = _logConsole;
		}
	};
	self.init();
}

And invoke it with:

var jsLog = new Log(true); // write to console
jsLog.log('Loading data', data, this);