我想在一个循环中从 JSON 生成一个 HTML 文件。例如这就是我想要的结果:
<div class="card">
<p>My name is: Peter</p>
<!-- another code -->
<p>My job is: Programmer</p>
<!-- some more code -->
</div>
<div class="card">
<p>My name is: John</p>
<!-- another code -->
<p>My job is: Programmer</p>
<!-- some more code -->
</div>
<!-- and so on ... -->
但我想从一个简单的 JSON 中动态生成所有 HTML(这意味着:所有“卡片”-divs)，例如:
[
{ "Name": "Peter", "Job": "Programmer" },
{ "Name": "John", "Job": "Programmer" },
{ "Name": "Kevin", "Job": "Scientist" },
]
不幸的是，我只是在学习一些 JS/jQuery，并不确切地知道如何在循环中使用 jQuery 来做到这一点。有人帮忙吗？
最佳答案
试试这个:
function createCard(cardData) {
var cardTemplate = [
'<div class="card">',
'<p>My name is: ',
cardData.Name || 'No name provided',
'</p>',
'<p>My job is: ',
cardData.Job || 'No job provided',
'</p></div>'
];
// a jQuery node
return $(cardTemplate.join(''));
}
var data = [
{ "Name": "Peter", "Job": "Programmer" },
{ "Name": "John", "Job": "Programmer" },
{ "Name": "Kevin", "Job": "Scientist" },
];
var cards = $();
// Store all the card nodes
data.forEach(function(item, i) {
cards = cards.add(createCard(item));
});
// Add them to the page... for instance the <body>
$(function() {
$('body').append(cards);
});
关于javascript - 如何在循环中使用 jQuery 和带参数的 JSON 生成动态 HTML？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41741171/