Mock Data Randomizer

May 12th, 2010 by Mike Wilcox


A common step in the development cycle is to substitute fake data until real data is created, generated, or the API is set up to retrieve it. Creating this fake data isn’t usually difficult, but it can be a tedious and repetitive task. Club AJAX has added a new library item to create mock data for use in application development. Using the Club AJAX Randomizer, you can easily generate random numbers, booleans, colors, dates, characters, words, sentences, titles, names, and even website names. Helper functions are also available to scramble or return random elements from your own data.

Demo

This demo page should give you a good idea of the usefulness of Randomizer. The entire page is randomly generated. The form controls are also populated this way, including the drop down, and the radio buttons and check box are selected randomly. The colors in the footer are generated, and on the bottom right is some mock JSON.

Collections and the Randomizer

The Mock Data Randomizer includes a number of collections. The first collection is all the letters of the alphabet, although in the order of most used. Because of this order, a weight applied to the random generators will return the more common letters more often. For example, if you wished to create your own words, weighting the letters would allow for ‘e’ and ‘t’ to be returned more often than ‘q’, resulting in something that would more naturally resemble a word.

The weighting used in Randomizer is the same as described in the previous post, Weighted Random Number. That random function is the key method driving most of the functionality, which can be accessed with the very short method name, rand.r(). Additionally, to get a result between two numbers use rand.range(), which is also weighted.

The second collection is a small set of the most commonly written words in English, ordered from those used most often to least. Also included are “wurds” which we will get to shortly.

There are two other collections: personal names, chosen because they can be used as first or last names; and website names, chosen because they are short and familiar: google, facebook, youtube, yahoo, etc. A random name or a site is returned by calling name() and site() respectively. Another method, url() can be used to return a full web address.

The sentences() method will do as expected and generate sentences; the length and amount determined by the range of options given. The title() method is similar, and will return one line of words, all in title case. Rounding out the string methods are chars(), word() and bignumber(). The latter method is convenient if you need a certain amount of numbers, like for a phone number.

Words and Wurds

By default the Randomizer doesn’t use the “words” collection, it uses “wurds”, which have scrambled vowels so they aren’t actual words, but look more like lorem ipsum, which is better for large blocks of text or sentences. Change real=true to use “words” instead of “wurds”. You’ll find that real words can also produce humorous results, but the effect of random real words is strangely distracting because you have the desire to read them — hence the invention of lorem ipsum.

The following code and example after, show the difference between “wurds” and real words. The arguments are ranges for the amount of words and amount of sentences.


rand.sentences(6,7,7,9);
rand.real = true;
rand.sentences(6,7,7,9);

The Mock Data Randomizer is used in this blog, so the examples are actual outputs. Refreshing the page will generate different results.

Dates

The date function, while not supplying a complete feature set of formatting ability, does allow for the most common outputs. Because of the numerous possibilities of parameters, the argument is a single object property bag. All are optional:

  • min: The minimum date. Can be a date object, seconds from 1970, or a correctly formatted string. Defaults to “now”.
  • max: The maximum date. Same format as minimum. Defaults to one year from mimimum date.
  • yearRange: Can change the maximum date to be this many years different from minimum date. A negative number can be used.
  • seconds: If true, returns seconds from 1970.
  • delimiter: If set, the date is returned as a string, using this as the separator between the year month and date. If seconds or delimiter is not set, a date object is returned.

The following are some examples of rand.date:


rand.date();
rand.date({seconds:true});
rand.date({delimiter:"/", yearRange:-5});
rand.date({delimiter:"/"});
rand.date({min:new Date('11/20/1964'), max:"4/19/1969", delimiter:"-"});

Randomizing Your Data

There are a few other methods in Randomizer, like bool() which is effectively the flip of a coin (unless you weight it). Also included is color() which almost didn’t make the cut until it was realized it was a little trickier to do than originally thought.

To help you with your own data, there is element() and scramble(). They both accept many different input types: an object, array, or a string that may be comprised of sentences, words, or just letters. The input gets converted into an array, and element() will randomly return one of the array elements (hence the name), while scramble() will return the entire array, but in a different order. The result of scramble() is useful in cases where you don’t want the possibility of the same element being returned twice, like if you were to have an array of 52 playing cards, you wouldn’t want to deal the ace of spades twice.

JSON

Randomizer doesn’t have any native JSON abilities because there is no way of knowing what type of data you would need generated. However, creating your own is not difficult. The trick is to correctly place the curly brackets and quotes:


var ar = [];
var i=3; while(i--){
	ar.push(
		'{'+
                ' "id":"'+rand.chars(9, 9).toUpperCase()+'", ' +
                ' "first":"'+rand.name()+'", ' +
                ' "last":"'+rand.name()+'", ' +
                ' "phone":"'+rand.bignumber(10)+'", ' +
                ' "site":"'+rand.url()+'", ' +
		' "date":"'+rand.date({delimiter:"/", yearRange:-1})+'", ' +
		' "title":"'+rand.title(3,4)+'", ' +
		' "description":"'+rand.sentences(2,3,3,5) + '"' +
                '}'
	);
}
var json = "["+ar.join(",")+"]";
console.log(json);
//test:
console.dir(eval("("+json+")"));

Conclusion

The Club AJAX Mock Data Randomizer will help you speed up development time, or at least remove the drudgery. It’s a small script, weighing in at under 9k gzipped, but it would usually be removed from the code before going to production. As with the Console Fix, the full source code and documentation for Randomizer is available at the Club AJAX Google Code Page with its very liberal license ( at Bob’s insistence! ) ;)

Tags: , , , , , , ,

15 Responses to “Mock Data Randomizer”

  1. [...] Wilcox has written about a nice little tool for folks who test their JavaScript code. The Mock Data Randomizer is fairly self-explanatory: PLAIN TEXT JAVASCRIPT: rand.sentences(6,7,7,9); // # of words [...]

  2. anon says:

    Useful idea, but the implementation could do with some extension.

    Top of the list is that you absolutely must make it so that the “random” data you produce is repeatable. It’s no good having random data on one run of a test that changes on the next run so no longer shows the problem. You need to add the ability to seed the random number generator, so that you can optionally restart it from the same point for each run. (The inbuilt Javascript random number does not provide this property – you will need to use something like http://davidbau.com/archives/2010/01/30/random_seeds_coded_hints_and_quintillions.html instead).

    We live in an international world, and restricting yourself to just 26 letters of the alphabet is totally inappropriate. I suggest that you should return text where (some) of the characters are replaced with accented versions of the same character – this is particularly relevant when returning names – people can get mightily upset if the system does not allow them to spell their names correctly.

    Finally, you should be aware that your JSON example is definitely not producing JSON! What you show is certainly JavaScript, but its not valid JSON. JSON requires that each property name is surrounded by double quotes.

  3. Mike Wilcox says:

    Good catch on the JSON oversight, that has been fixed in the example.

  4. Cameron says:

    You should use your pad method inside the color method so each color value is 2 characters. It can currently return values like ‘#01234′.

  5. JimBastard says:

    Why not just use the Faker port for javascript? It has way more fake data and API calls.

    http://github.com/marak/Faker.js

  6. Mike Wilcox says:

    @Cameron, thanks. It was working but undoubtedly not all colors came through properly.

    @Jim, Faker is a nice library, but I didn’t have use for something so large. Randomizer is quite a bit smaller at 3k gzipped. I also needed several features it didn’t offer, like weighted generators, colors, booleans, titles, randomizing my own sets of data, and dates in different formats.

  7. memo says:

    Wow, this is such a useful tool for testing js code!
    Wonderful job.

  8. [...] Wilcox has written about a nice little tool for folks who test their JavaScript code. The Mock Data Randomizer is fairly self-explanatory: PLAIN TEXT JAVASCRIPT: rand.sentences(6,7,7,9); // # of words [...]

  9. [...] Mock Data Randomizer Using the Club AJAX Randomizer, you can easily generate random numbers, booleans, colors, dates, characters, words, sentences, titles, names, and even website names. Helper functions are also available to scramble or return random elements from your own data. (tags: javascript testing libraries) [...]

  10. [...] Adalah Mike Wilcox yang menulis sebuah tool kecil yang digunakan untuk mengetest sebuah kode javascript. Dinamakan sebagai Mock Data Randomizer. [...]

  11. Alexander Trefz says:

    The Demo Page gives great impressions – 404

  12. Mike Wilcox says:

    Fixed Alexander, thanks for the heads up.

  13. webdesigner says:

    this is just amazing

  14. Great post. Thanks for providing a demo page it gives out a good idea of the usefulness of Randomizer.

  15. 7pm Tech Code Snippets…

    [...]Club AJAX | Mock Data Randomizer[...]…