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.

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.

• javascript
• jquery
• html
• json

• try to change setting data from append to text when you apply json – MysterX Commented Sep 13, 2015 at 10:58
• @MysterX That didn't work. I tried that but still getting the same thing. That also won't work with age because it will remove the icon. – Nicholas Robinson Commented Sep 13, 2015 at 11:03

2 Answers 2

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./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>

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