Question

当我设计界面时，我无法创建可信的虚拟文本。但与此同时，我并不想一遍又一遍地复制和粘贴相同的精确数据，因为这样界面看起来并不现实。

我已经生成了Master JSON Schema，其中包含我使用的最常见的数据类型。我在写HTML时希望能够做到这一点：

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

或

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

...其中{first_name}的每个实例都替换为我的JSON文件中的随机名字。同样，我在那里的任何其他变量（last_name，email，address，country，sentence等等......）

有没有办法在jQuery之类的东西没有PHP ？我想它必须是这样的：

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

理想情况下，我有一个非常简单的通用函数，可以通过UI查找任何和所有标记，并用主模式JSON文件中的随机数据替换每个标记。

点击下方查看我想出的解决方案，感谢Billy的帮助：

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

Answer 1

在http://chancejs.com/和http://handlebarsjs.com/之间

，您可以生成大量可重复的种子随机数据结构......

＆＃13;

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

＆＃13;

<!-- 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>

＆＃13;

Answer 2

这样的东西会给你你想要的东西：

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

您可以使用AJAX访问此数据，然后使用Math.random获取元素然后，在jQuery的帮助下，您可以动态生成li项。

假设你有一个像<div id="anyId"></div>这样的div元素，你可以放置ul和li。

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

请注意，您需要从同一个域发出请求或设置Access-Control-Allow-Origin标头才能发出跨域请求。

但是，此方法运行缓慢。加载此文件需要5到20秒。从服务器加载大文件并仅使用一些数据是一种不好的方法您肯定需要在服务器端实现此算法。类似于SQL SELECT TOP n FROM x ORDER BY newid()（SELECT * FROM x ORDER BY RAND() LIMIT n）。

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

点击下方查看我想出的解决方案，感谢Billy的帮助：

3 个答案: