gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 13:22:17 25 4
gpt4 key购买 nike

当我设计界面时,我不会费心去创建可信的虚拟文本。但与此同时,我不想一遍又一遍地复制和粘贴相同的数据,因为这样界面看起来不太现实。

我生成了一个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_nameemailaddresscountrysentence 等...)

有没有办法在 jQuery 之类的东西中不用 PHP 来做到这一点?我想它一定是这样的:

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

理想情况下,我会有一个非常简单的通用函数,它会梳理 UI 来查找所有标签,并用主架构 JSON 文件中的随机数据替换每个标签。

<小时/>

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

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>

关于javascript - 将随机数据从 JSON 文件加载到 HTML 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32131791/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com