39155733

How to populate different <span> elements from a JSON array using ajax

HTML

<p class="tech">Area 1 Tech: <br> <span class="area">Loading...</span> / Phone: <span class="phone"></span></p>
<p class="tech"><span class="area"><br></span> / Phone: <span class="phone"></span></p>
<p class="tech"><span class="area"><br></span> / Phone: <span class="phone"></span></p>
<p class="tech"><span class="area"><br></span> / Phone: <span class="phone"></span></p>
<p class="tech"><br><span class="area">Loading...</span> / Phone: <span class="phone"></span></p>

JavaScript

var allTechs = JSON.parse(`[
{"id":1, "name":"First Last", "phone":"12345657"},
{"id":2, "name":"Name Two", "phone":"1234567"},
{"id":3, "name":"Another Name", "phone":"321654aa"},
{"id":4, "name":"Another Guy", "phone":"321654"},
{"id":5, "name":"Name Five", "phone":"321654"}
]`);

for (var i = 0; i < allTechs.length; i++) {
	var tech = allTechs[i];
  var techElement = $('.tech')[i];
  $(techElement).find('.area').html(tech.name);
  $(techElement).find('.phone').html(tech.phone);
}