JSFiddle - React, Tailwind, and code Playground

by Chris Bao

HTML

<div class="main">
    <form role="form">
        <div class="form-group">
            <label>Mockaroo API Key</label>
            <input type="text" class="form-control" id="key" value=""/>
        </div>
        
        <div class="form-group">
            <label>Fields JSON</label>
            <textarea id="fields" class="form-control" rows="10">
[{
    "name": "name",
    "type": "Full Name"
}, {
    "name": "yearsEmployed",
    "type": "Number",
    "min": 1,
    "max": 30,
    "decimals": 0
}, {
    "name": "department",
    "type": "Custom List",
    "values": ["R+D", "Marketing", "HR"]
}, {
    "name": "dob",
    "type": "Date",
    "min": "1/1/1950",
    "max": "1/1/2000",
    "format": "%m/%d/%Y"
}]   
            </textarea>
        </div>
        
        <div class="form-group">
            <button class="btn btn-primary" type="button" id="submit">Generate Data</button>
        </div>
        
        <div class="form-group">
            <label>Result</label>
            <textarea id="result" class="form-control" rows="10"></textarea>
        </div>
    </form>
</div>

CSS

.main {padding: 10px}

JavaScript

$(function() {
    $('#submit').click(function() {
        var key = $('#key').val();
        
        if(!key) {
            alert('Please enter your Mockaroo API Key.');
            return;
        }
        
        try {
            var fields = JSON.parse($('#fields').val());
        } catch(e) {
            alert(e.message + ' Invalid JSON: fields must be a valid JSON array');   
        }
        
        // var url = 'http://www.mockaroo.com/api/generate.json?count=5&key=' + key +
          // '&fields=' + encodeURIComponent(JSON.stringify(fields));
        var url = 'http://www.mockaroo.com/api/generate.json?schema=service_general_info&key=' + key;
        
        $('#result').val("loading...");
        
        $.ajax(url, {
            dataType: 'jsonp',
            contentType: 'application/json',
            success: function(data) {
                $('#result').val(JSON.stringify(data))
            }, 
            error: function(xhr, status, error) {
                $('#result').val('An error occurred.');
            }
        });
    });
});