June 5, 2020

How to Generate Fake Data in Javascript Using Faker.js

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to generate fake data in javascript. As a web developer, I am always in need of fake data so that I can feed it to my web application during development to make sure it is working as expected.

Creating a fake data generator in javascript is not so simple and you might end up using some sort of third-party API to do so. There are some disadvantages of using such API. They have certain rate limitations as well as you have to be connected to the internet to get the data.

To make things simple, we are going to make use of Faker JS. It is a very popular and commonly used library to generate fake data. Personally, I use it to create fake records in my local database for testing during development.

Faker JS has comprehensive documentation so that you can get the best out of it. I suggest you to check that out to learn more about it.

You can download Faker JS minified version from official website or you can use the CDN link. Faker JS has a helper method createCard() which is enough to generate fake details such as city, name, email, zip code, etc.

In the following example, we have multiple input fields and a button element. Upon click of a button, we will generate some fake data and display that in the corresponding input fields. Please have a look over the code example and the steps given below.

HTML & CSS

We have 3 main elements in the HTML file (div, button, and input). The div element is just a wrapper for the rest of the elements.
The button element has “Generate” as innerText.
We have added a CDN link of minified Faker JS in the HTML file using the script tag.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div>
        <input type="text" id="name" placeholder="Enter Name">
        <input type="email" id="email" placeholder="Enter Email">
        <input type="text" id="city" placeholder="Enter City">
        <input type="text" id="zipcode" placeholder="Enter Zipcode">
        <input type="text" id="country" placeholder="Enter Country">

        <button>Generate</button>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

input, button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 15px;
    width: 25%;
}

Javascript

We have selected the button element using the document.querySelector() method and stored it in the btnGen variable.
We have attached a click event listener to the button element.
In the event handler function, we are calling createCard() method of Faker JS which will return an object with fake details including name, address, email, etc. We will store that object in the info variable.
We will destructure the info object and display fake details in the corresponding input fields using value property.

let btnGen = document.querySelector('button');

btnGen.addEventListener('click', () => {
    let info = faker.helpers.createCard();
    
    let {name, email, address:{city, country, zipcode}} = info;

    document.querySelector('#name').value = name;
    document.querySelector('#email').value = email;
    document.querySelector('#city').value = city;
    document.querySelector('#zipcode').value = zipcode;
    document.querySelector('#country').value = country;
});

You May Also Like: