0

When I design interfaces, I can't be bothered to create believable dummy text. At the same time, however, I don't want to just copy and paste the same exact data over and over, because then the interface doesn't look terribly realistic.

I have generated a Master JSON Schema that contains the most common types of data I use. I'd like to be able to do something like this when I'm writing HTML:

<ul>
  <li>{first_name}</li>
  <li>{first_name}</li>
  ...
  <li>{first_name}</li>
</ul>

OR

<ul>
  <li data="{first_name}"></li>
  <li data="{first_name}"></li>
  ...
  <li data="{first_name}"></li>
</ul>

...whereby every instance of {first_name} is replaced with a random first name from my JSON file. Likewise for any other variable I have in there ( last_name, email, address, country, sentence, etc... )

Is there a way to do this without PHP in something like jQuery? I imagine it'd have to be something like:

foreach(var) {
  return randomData(var);
}

Ideally I'd have a very simple, generalized function that would comb through the UI looking for any and all tags and replace each one with a random piece of data from the master schema JSON file.

Click below to see solution I came up with thanks to Billy's help:

http://jsfiddle.net/JonMoore/5Lcfz838/2

Improve this question
3
  • You could use Math.random and then just grab the random index of your json array Commented Aug 21, 2015 at 3:16
  • Not sure how I'd write a short, generalized function to comb through the UI, look for any tags in braces (or in the "data" attribute of a tag...however I should do it), then replace each one. Commented Aug 21, 2015 at 3:21
  • AJAX is your friend here. Commented Aug 21, 2015 at 3:32

3 Answers 3

Reset to default
3

between http://chancejs.com/ and http://handlebarsjs.com/ you can generate lots of repeatable, seeded random data structures...

// get references to DOM elements
var tplElm = document.getElementById('template');
var tgtElm = document.getElementById('target');

// compile handlebars template
var template = Handlebars.compile(tplElm.innerText);

// initialise chance with seed
// change the seed to change the output data
var chance = new Chance(1234567890);

// create array of random data
var people = [];
for(var i=0;i<10;i++){
  people.push({
    first_name: chance.name()
  });
}

// apply data to template, and insert into page
tgtElm.innerHTML = template({
  people: people
});
<!-- load dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/0.5.6/chance.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.min.js"></script>

<!-- define template -->
<script id="template" type="text/template">
<ul>
  {{#people}}
  <li>{{first_name}}</li>
  {{/people}}
</ul>
</script>

<!-- placeholder for output -->
<div id="target"></div>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Exactly the type of thing I was looking for. Thank you, Billy!
1

Something like this will give you what you want:

var json = [{ "first_name": "bob"}, {"first_name": "sam"}, {"first_name": "bill"}];
var randomnum = Math.floor((Math.random() * 3));
console.log(json[randomnum].first_name);
Improve this answer

Comments

1

You can access this data using AJAX and then get elements using Math.random.
Then, with the help of jQuery you can dynamically generate li items.

Let's suppose you have a div element like <div id="anyId"></div> where you will put your ul and lis.

function getElementsFromMasterSchema(count, callback) {
  var items = [];
  var usedIds = {};

  $("h3").text("Request sent...Loading..."); 
  timer = setInterval(function() {
      $("h3").text("Loading..." + (time++) + " seconds passed.");           
  }, 1000);

  $.ajax({
    url: "https://www.mockaroo.com/37dcc3b0/download?count=100&key=37b5a7c0",
    method: "GET"
  }).done(function(dt) {
    var length = dt.length;

    while (items.length < count) {
      var randomItem = dt[Math.round(Math.random() * length)];
      if (usedIds[randomItem.id] !== true) {
        usedIds[randomItem.id] = true;
        items.push(randomItem);
      }
    }

    callback(items);
  });
}

getElementsFromMasterSchema(10, function(result) {
  var ul = $("<ul/>");

  for (var i = 0; i < result.length; i++) {
    $("<li/>").text(result.first_name).appendTo(ul);
  }

  $("#anyId").append(ul);
});

Note that you need to make requests from the same domain or set Access-Control-Allow-Origin header in order to make cross-domain requests.

However, this method is working slowly. It takes from 5 to 20 seconds to load this file. Loading a large file from a server and using only some of data is a bad approach.
You definitely need to implement this algorithm on a server side. Something like SQL SELECT TOP n FROM x ORDER BY newid() (SELECT * FROM x ORDER BY RAND() LIMIT n).

Improve this answer

2 Comments

Will this comb through the HTML to identify all tags like {first_name} and {last_name} and return an appropriate random value?
@Jon It will not identify anything. You should do everything yourself. However, I have shown how to do this in my updated answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.