Generating Fake Data for your JavaScript App using Faker.js

April 11th, 2016

When we create a JavaScript web application, we need to have some data to demonstrate the application in action. But what if the database is not available or do not have time to fill it manually?

Marak has created a convenient tool that allows us to generate fake data quickly: Faker.js.

So, let’s begin. First, a simple example.

Supposing, we are developing the application “Catalogue of Books”. We need to quickly and easily create a sample book from the catalog. We want to have the book was the name of the author picture of the author, the book release date, the image on the cover of the book, price and description.

In this case, we can use Faker.js:

var book = {
    title: faker.lorem.words(),
    author: faker.name.findName(),
    author_image: faker.image.avatar(),
    release_date: faker.date.recent(),
    image: faker.image.abstract(),
    price: faker.commerce.price(),
    short_description: faker.lorem.sentence(),
    long_description: faker.lorem.paragraph()
}

We now have a book in the form of an object, which has all the desired properties:

{
    "title": "praesentium at et",
    "author": "Brett Osinski",
    "author_image": "https://s3.amazonaws.com/uifaces/faces/twitter/xravil/128.jpg",
    "release_date": "2016-04-10T16:12:46.276Z",
    "image": "http://lorempixel.com/640/480/abstract",
    "price": "8.00",
    "short_description": "Voluptatem eaque velit numquam et esse rerum.",
    "long_description": "Quasi odio eveniet necessitatibus vitae ..."
}

Usage Faker.js

You can use Faker.js in the browser and on the server use Node.js. Install Faker.js with npm npm install faker

In Browser

npm install faker
Create HTML File and Include Faker:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="node_modules/faker/build/build/faker.js"></script>
</head>
<body>
    <script type="text/javascript">
        var book = {
            title: faker.lorem.words(),
            author: faker.name.findName(),
            author_image: faker.image.avatar(),
            release_date: faker.date.recent(),
            image: faker.image.abstract(),
            price: faker.commerce.price(),
            short_description: faker.lorem.sentence(),
            long_description: faker.lorem.paragraph()
        }

        console.log(book);
    </script>
</body>
</html>

In Node.js

npm install faker
Create your index.js file and require faker:

var faker = require('faker');

var book = {
    title: faker.lorem.words(),
    author: faker.name.findName(),
    author_image: faker.image.avatar(),
    release_date: faker.date.recent(),
    image: faker.image.abstract(),
    price: faker.commerce.price(),
    short_description: faker.lorem.sentence(),
    long_description: faker.lorem.paragraph()
}

console.log(book);

Faker.js Data

List of data that can generate Faker.js:

address
commerce
company
date
finance
hacker
helpers
image
internet
lorem
name
phone
random
system

Each element has a lot of sub-items:

address
- zipCode
- city
- cityPrefix
- etc …
commerce
- color
- department
- productName
- etc …
etc …

A full list of the data you can find here https://github.com/Marak/faker.js#api-methods

Faker.js Helpers

Faker.js also has “helpers” who represent a ready-made “templates” with the data. I will give a couple of examples:

Contextual Card

faker.helpers.contextualCard()

{
    "name": "Susie",
    "username": "Susie_Greenfelder2",
    "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/ffbel/128.jpg",
    "email": "Susie_Greenfelder2_Rice@gmail.com",
    "dob": "1978-02-11T13:42:19.879Z",
    "phone": "1-953-835-6721 x423",
    "address": {
        "street": "Kuhic Parkways",
        "suite": "Apt. 627",
        "city": "Weberchester",
        "zipcode": "53222-1314",
        "geo": {
            "lat": "-69.8378",
            "lng": "-59.7793"
        }
    },
    "website": "joey.info",
    "company": {
        "name": "Hansen - Kuhic",
        "catchPhrase": "Optional intangible ability",
        "bs": "granular monetize networks"
    }
}

User Card

faker.helpers.userCard()

{
    "name": "Madeline Breitenberg",
    "username": "Santina_Hackett",
    "email": "Eldred3@hotmail.com",
    "address": {
        "street": "Hershel Mills",
        "suite": "Apt. 034",
        "city": "Horaciostad",
        "zipcode": "40886",
        "geo": {
            "lat": "35.5782",
            "lng": "-47.5731"
        }
    },
    "phone": "660.904.9057 x449",
    "website": "mertie.net",
    "company": {
        "name": "Deckow and Sons",
        "catchPhrase": "Visionary multimedia functionalities",
        "bs": "cutting-edge innovate e-services"
    }
}

Create Transaction

faker.helpers.createTransaction()

{
    "amount": "52.00",
    "date": "2012-02-01T13:00:00.000Z",
    "business": "Auer Group",
    "name": "Money Market Account 4685",
    "type": "withdrawal",
    "account": "13540266"
}

NodeJS JSON API Simple Template

We can quickly create a simple Node API, which returns the fake data.

Install ExpressJS, CORS and Faker use npm install express cors faker
Create Simple API Server:

var express = require('express'),
    cors = require('cors'),
    app = express(),
    faker = require('faker');

app.set('port', process.env.PORT || 3500);

app.use(cors());

app.get('/api', function(req, res) {
    res.json([
        {
            title: faker.lorem.words(),
            author: faker.name.findName(),
            author_image: faker.image.avatar(),
            release_date: faker.date.recent(),
            image: faker.image.abstract(),
            price: faker.commerce.price(),
            short_description: faker.lorem.sentence(),
            long_description: faker.lorem.paragraph()
        }
    ])
});

var server = app.listen(app.get('port'), function() {
    console.log('Server up: http://localhost:' + app.get('port'));
});

Run Server with node server.js

Server up: http://localhost:3500

You Can Use Postman Google Chrome Extension to see the result. To do this, open Postman and send GET Request to http://localhost:3500/api

POSTMAN

Mikhail

I am Mikhail Evdokimov, a Hobbyist Self Taught Programmer