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

Load Random Data into HTML from JSON File?

本文关键字：数据 HTML 随机 加载 JSON 文件      更新时间：2023-09-26

当我设计界面时，我懒得创建可信的虚拟文本。然而，与此同时，我不想只是一遍又一遍地复制和粘贴相同的数据，因为这样界面看起来就不太真实了。

我已经生成了一个主JSON模式，其中包含我使用的最常见的数据类型。当我在写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等……)

有没有一种方法来做这个没有PHP在像jQuery的东西?我想应该是这样的:

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

理想情况下，我会有一个非常简单，通用的函数，将梳理UI寻找任何和所有的标签，并替换每一个随机的数据块从主模式JSON文件。

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

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

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

像这样的东西会给你你想要的:

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

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

让我们假设你有一个div元素，比如<div id="anyId"></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).

相关文章：