从JSON文件将随机数据加载到HTML中？

Question

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

Answer 1

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> 

Answer 2

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);

Answer 3

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 li s.

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 ).