javascript - 使用 jQuery 使用 JSON 数据填充 HTML

Question

我正在尝试在我的 HTML 中动态创建申请人列表。我有一个我正在阅读的以 JSON 格式保存的申请人列表。我有一个申请人“磁贴”的 HTML 模板，我阅读了它，填充然后附加到每个申请人的页面。

我的模板:

<div>
   <div class="name"></div>
   <div class="age"></div>
   <div class="gender"></div>
   <div class="email"><i class="fa fa-envelope"></i></div>
</div>

我的 JSON 数据:

{
  "applicants" : [
    {
      "name" : "John Smith",
      "email" : "email@gmail.com",
      "gender" : "Male",
      "age" : "22"
    }
  ]
}

我的 jQuery:

 $.get("applicants.json", function(json) {
     json.applicants.forEach(function(applicant) {
         var newApplicant = $(templates).find("#applicant").html();

         $(newApplicant).find(".name").append(applicant.name);
         $(newApplicant).find(".email").append(applicant.email);
         $(newApplicant).find(".gender").append(applicant.gender);
         $(newApplicant).find(".age").append(applicant.age);

         $(newApplicant).appendTo(".applicant-list");
     });
 });

运行此代码后，我只是取回没有 JSON 信息的模板。

我已经尝试在附加 applicant.name 之后放置一个 console.log() 但 newApplicant 仍然没有变化。

我尝试的其他方法是 console.log($(newApplicant).find(".name").append(applicant.name).html()); 它向我展示了 .name 正在填充，但这些更改不会持续存在。

谁能看出我做错了什么？

谢谢。

Answer 1

我不确定 forEach 是否正确。您可以使用 jQuery 的 $.each 函数在一个数组中循环，其中 this 被称为当前迭代对象:

$.each(json.applicants, function () {

  var newApplicant = $("body").find("#applicant > div").clone();

  newApplicant.find(".name").append(this.name);
  newApplicant.find(".email").append(this.email);
  newApplicant.find(".gender").append(this.gender);
  newApplicant.find(".age").append(this.age);

  $(newApplicant).appendTo(".applicant-list");
});

片段

$(function () {
  json = {
    "applicants" : [
      {
        "name" : "Nicholas Robinson",
        "email" : "ntrpilot@gmail.com",
        "gender" : "Male",
        "age" : "22"
      }
    ]
  };

  $.each(json.applicants, function () {

    var newApplicant = $("body").find("#applicant > div").clone();

    newApplicant.find(".name").append(this.name);
    newApplicant.find(".email").append(this.email);
    newApplicant.find(".gender").append(this.gender);
    newApplicant.find(".age").append(this.age);

    $(newApplicant).appendTo(".applicant-list");
  });
});

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div id="applicant">
  <div>
    <div class="name"></div>
    <div class="age"></div>
    <div class="gender"></div>
    <div class="email"><i class="fa fa-envelope"></i></div>
  </div>
</div>

<div class="applicant-list"></div>