如何在循环中使用 jQuery 和带参数的 JSON 生成动态 HTML？

Question

如何在循环中使用 jQuery 和带参数的 JSON 生成动态 HTML？

Kab*_*aba 3 html javascript jquery json loops

我想在循环中从 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 ... -->

Run Code Online (Sandbox Code Playgroud)

但我想从一个简单的 JSON 中动态生成所有的 HTML（这意味着：所有的“卡片”-div），例如：

[
    { "Name": "Peter", "Job": "Programmer" },
    { "Name": "John", "Job": "Programmer" },
    { "Name": "Kevin", "Job": "Scientist" },
]

Run Code Online (Sandbox Code Playgroud)

不幸的是，我只是在学习一些 JS/jQuery 并且不确切知道如何在循环中使用 jQuery 来做到这一点。有人帮忙吗？

Answer 1

kid*_*won 5

试试这个：

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，7 月前
查看次数：	6748 次
最近记录：	9 年，7 月前