Generating random data on the client side

Automatically creating fake or sample data is a frequent requirement for front-end web developers. Although usually not tedious, there are times when you need to quickly and automatically generate structured data for your html forms or CMS systems for testing purposes.

Faker.js is a JavaScript implementation inspired by Benjamin Curtis’s Ruby Gem Faker and Perl’s Data::Faker that lets you generate commonly required data quickly. You can check the demo page to get an idea.

Getting Fake.js

You can download the library form github and include in your pages where you need to generate the data.

..
<script src = "Faker/Faker.js" type = "text/javascript"></script>
..

Generating fake data

The API is divided into various sections as show below:

# Name
    * findName
# Address
    * zipCode
    * city
    * streetName
    * streetAddress
    * secondaryAddress
    * ukCounty
    * ukCountry
# PhoneNumber
    * phoneNumber
# Internet
    * email
    * userName
    * domainName
    * domainWord
...

So if you need to generate a random email address or a zip code you could do it like this:

var randomEmail = Faker.Internet.email();
var randomZip = Faker.Address.zipCode();

Some sample API methods are shown below, but there are more of them which you can find here in the API section.

<script>
var longParagraph = Faker.Lorem.paragraphs();
var singleSentence = Faker.Lorem.sentence();
var companyName= Faker.Company.companyName();
var catchPhrase = Faker.Company.catchPhrase();
</script>

One of the interesting methods is ‘ Faker.Company.catchPhrase()’, which generates catchy technological phrases. A kind of a tag line generator for your new multi-million dollar company ;-). A sample output is shown below.

Stand-alone 5th generation utilisation
Ergonomic explicit focus group
Horizontal human-resource solution
Automated contextually-based knowledge base
Distributed multi-state encoding
Extended zero administration interface
Proactive coherent productivity
Streamlined national approach
Total transitional algorithm
Stand-alone fault-tolerant moderator

The API also includes several helper methods that lets you create bulk fake data using the single API methods. For example you can generate complete user information templates cards by using a single helper method ‘Faker.Helpers.userCard()’. A sample run is shown below:

name: Blair Nikolaus
username: Fernando_Olson
email: Jacklyn_Brekke@aurore.name
address:street: Kozey Meadow
suite: Apt. 664
city: Felipastad
zipcode: 88071
 
phone: 571.540.8605 x136
website: reba.co.uk
company:name: Kuhic and Sons
catchPhrase: Integrated solution-oriented Graphical User Interface
bs: seize scalable web services

The ‘Faker.Helpers.userCard()’ method returns a nested object, so you will need to recursively traverse the object to extract the data. A simple function to do the same is given below:

<script>
// Recursively traverse a nested Javascript object and return it.
function printObj(obj)
{
  var prop, res = '';
 
  for(prop in obj)
  {
    if(typeof obj[prop] == 'object'){
        res += prop + ':' + printObj(obj[prop]) + '<br>';
    }else{
        res += prop + ': ' + obj[prop] + '<br>';
    }
  }
   return res;
}
</script>

So now you can do something like this:

...
var obj = Faker.Helpers.userCard();
alert( printObj(obj) );
...

Another Randomizer library

Club AJAX Mock Data Randomizer library is another library that lets you generate random data quickly. This library lets you generate random dates, colors, boolean values which is lacking in the Faker library. Check a simple demo using this library.

One thought on “Generating random data on the client side

Comments are closed.