How to change value inside generated HTML in JS?

Question

I have the following HTML generated with js:

var htmlBox = "<div><span class='name'></span><span class='age'></span></div>"

I want to display all the names from a Json object staff when I loop over it.

for(var i = 0;i <= staff.length;i++){
    $(htmlBox).find('span.name').text(staff[i]['name']); # Not sure
    $(htmlBox).find('span.age').text(staff[i]['age']); # doesn't work   

    $("#wrapper").append(htmlBox);
}

I dont' know exactly how to do it with raw js or jquery.

Answer 1

I suggest creating a jQuery object from your HTML string upon each iteration of your loop.
Also, since the array is zero-based, looping until i <= staff.length will go one index too far.
Instead, try i < staff.length.

var staff = [{
    'name': 'John Doe',
    'age': 100
  },
  {
    'name': 'Jane Doe',
    'age': 50
  }
];

var boxTemplate = "<div><span class='name'></span><span class='age'></span></div>";

var $wrapper = $('#wrapper');

for (var i = 0; i < staff.length; i++) {
  var $thisBox = $(boxTemplate);
  $('.name', $thisBox).text(staff[i]['name']);
  $('.age', $thisBox).text(staff[i]['age']);
  $wrapper.append($thisBox);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper"></div>