Populating HTML with JSON data using jQuery

Question

I am trying to dynamically create a list of applicants in my HTML. I have a list of applicant saved in JSON format that I am reading in. I have an HTML template of the applicant "tile" that I read in, populate and then append to the page for each applicant.

My template:

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

My JSON data:

{
  "applicants" : [
    {
      "name" : "John Smith",
      "email" : "[email protected]",
      "gender" : "Male",
      "age" : "22"
    }
  ]
}

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

After running this code, I am just getting the template back without the JSON information.

I have tried placing a console.log() after appending applicant.name but there is still no change to newApplicant.

Something else I tried was console.log($(newApplicant).find(".name").append(applicant.name).html()); which showed me that the .name is being populated but those changes are not persisting.

Can anyone see what I am doing wrong?

Thanks.

Answer 1

I am not sure if forEach would be a right one. You can use jQuery's $.each function to loop in an array with this being referred as the current iterated object:

$.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");
});

Snippet

$(function () {
  json = {
    "applicants" : [
      {
        "name" : "Nicholas Robinson",
        "email" : "[email protected]",
        "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>

Answer 2

In the question you omitted two HTML elements that instead you mention in the jQuery code, so according to the latter, and correct me if I'm wrong, the HTML should look like that

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

Then, in the jQuery you should either use your $.get() function and then parse or use instead $.getJSON()

$.getJSON("applicants.json", function(json) {
    json.applicants.forEach(function(applicant) {
        var newApplicant = $('body').find(".applicant").clone();

        $(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");
    });
});