Mocking jQuery Ajax Calls with Random Templated Data

In a recent blog post, Mocking the jQuery Ajax Call in ASP.NET MVC 3 Music Store , I showed you how you could use the $.mockjax library, written by Jonathan Sharp, to intercept AJAX requests and return a mocked response. This tool can be especially useful when trying to code your front-end, while the back-end piece is either isn't available or accessible.

Another useful library that you may consider when building quick prototypes is $.mockJSON, written by Menno van Slooten. This library has some of the same features as $.mockjax, but the piece I'd like to focus on is the random data tempting feature. This can be very handy when you want to mock a JSON response from a AJAX call, but instead of manually building the response you can build a template to do it for you.

To demonstrate using this random data technique, I decided to use the SlickGrid jQuery Plugin and populate it with the JSON response from an AJAX call. Since the AJAX call doesn't exist, I am going to use $.mockjax to return the response using random data generated from $.mockJSON.

The following code is what is necessary to populate the SlickGrid with data from an AJAX call.

(function($) {

var grid,
  columns = [
    {id:"firstName", name:"First Name", field:"firstName", width:70},
    {id:"lastName", name:"Last Name", field:"lastName", width:70},
    {id:"email", name:"Email", field:"email", width:170},
    {id:"percentHealth", name:"% Health", field:"percentHealth", width:90, formatter:GraphicalPercentCompleteCellFormatter},
    {id:"birthday", name:"Birthday", field:"birthday", width:70},
    {id:"married", name:"Married", field:"married", width:50, formatter:BoolCellFormatter}
],
  options = {
    editable: false,
    enableAddRow: false,
    enableCellNavigation: true,
    rowCssClasses: function(item) {
      return (item.percentHealth >= 80) ? 
        "healthy" : "";
    }
  };
        
$.ajax({
  url: "/Contact/List",
  type: "GET",
  dataType: "json",
  success: function(data, textStatus, xhr) {
    grid = new Slick.Grid("#myGrid", 
      data.contacts, columns, options);
  },
  error: function(xhr, textStatus, errorThrown) {
    console.log("Error: " + textStatus);
  }
});

function BoolCellFormatter(row, cell, value, 
  columnDef, dataContext) {
  return value ? "✔" : "";
};
    
}(jQuery));

At this point, I don't have the '/Contact/List' endpoint defined so if I executed the above code I would get a GET http://fiddle.jshell.net/Contact/List 404 (NOT FOUND) error in my console. If I did want to test the behavior of my front-end without depending on a back-end existing, then I can add an additional $.mockjax statement to intercept the call and respond with some random data provided by $.mockjson.

$.mockjax({
    url: '/Contact/List',
    responseTime: 750,
    responseText: $.mockJSON.generateFromTemplate({
        "contacts|50-500": [{
            "married|0-1": true,
            "email" : "@EMAIL",
            "firstName": "@MALE_FIRST_NAME",
            "lastName": "@LAST_NAME",
            "birthday": "@DATE_MM/@DATE_DD/@DATE_YYYY",
            "percentHealth|0-100": 0 
        }]
    })
});

The above code will intercept any AJAX requests with the '/Contact/List' endpoint and will use the template passed to $.mockJSON as the response. The template will generate between 50 and 500 contacts each having male first names and having a health ranging from 0 to 100. Each contact will have a random email, birthday, and married boolean field. You can find out more information as to what $.mockJSON supports and how you can extend it from their website.

The following JSON snippet is an example of what the above $.mockJSON template will generate. The above template would generate between 50 to 500 contacts, but for brevity I just included 4.

{
  "contacts": [{
    "married": false,
    "email": "u.lewis@gonzalez.com",
    "firstName": "Paul",
    "lastName": "Martinez",
    "birthday": "12/16/2005",
    "percentHealth": 37},
  {
    "married": false,
    "email": "k.hernandez@smith.com",
    "firstName": "Daniel",
    "lastName": "Gonzalez",
    "birthday": "07/11/1997",
    "percentHealth": 1},
  {
    "married": true,
    "email": "c.thomas@taylor.com",
    "firstName": "David",
    "lastName": "Lewis",
    "birthday": "04/13/2007",
    "percentHealth": 62},
  {
    "married": true,
    "email": "v.davis@lee.com",
    "firstName": "Richard",
    "lastName": "Rodriguez",
    "birthday": "05/10/2007",
    "percentHealth": 6}]

  //A bunch more...

}

Now, since we have some data coming back from our AJAX request, we can run our code again and proceed to get our front-end working as intended.



View Demo Edit Demo