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

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 文件中的随机数据替换每个标签。

<小时/>

点击下面查看我在比利的帮助下想出的解决方案:

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

Answer 1

在 http://chancejs.com/ 和 http://handlebarsjs.com/ 之间，您可以生成大量可重复的种子随机数据结构...

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