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.

try to change setting data from append to text when you apply json — MysterX
– 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
– Nicholas Robinson, Commented Sep 13, 2015 at 11:03

Praveen Kumar Purushothaman · Accepted Answer · 2015-09-13 11:59:57Z

5

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>

edited Sep 13, 2015 at 11:59

answered Sep 13, 2015 at 11:04

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Nicholas Robinson Over a year ago

The problem isn't with the iteration hey. If I print applicant.name I do get the expected value.

Praveen Kumar Purushothaman Over a year ago

@NicholasRobinson See how I have handled newApplicant.

t0mppa Over a year ago

@PraveenKumar: Perhaps you could add an explanation about what's wrong with the code in the question and how you've corrected that, instead of just providing code that supposedly works better?

Praveen Kumar Purushothaman Over a year ago

@NicholasRobinson I have added an explanation and a working fiddle, if it helps.

Andre.IDK Over a year ago

@PraveenKumar Yeah, it's a real struggle.. Anyway, down vote removed. Have a nice day!

|

Andre.IDK · Accepted Answer · 2015-09-13 11:16:13Z

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

Collectives™ on Stack Overflow

Populating HTML with JSON data using jQuery

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related